CODEWITHSUNDEEP
javascriptjqueryautocomplete
user4017388
user4017388

Reputation:

jquery autocomplete in popup window

I am trying to make a autocomplete in my popup window. But it is not working. Anyone can help me here ?

This is my popup window code JS:

 $(document).ready(function(){

        $('.swqweeer').click(function(){
          $('.hakkindaar, .box').animate({'opacity':'.50'}, 300, 'linear');
          $('.edith').animate({'opacity':'1.00'}, 300, 'linear');
          $('.hakkindaar, .edith').css('display', 'block');
        });

        $('.chak').click(function(){
          close_box();
        });

        $('.iptlh').click(function(){
          close_box();
        });

      });

      function close_box()
      {
        $('.hakkindaar, .edith').animate({'opacity':'0'}, 300, 'linear', function(){
          $('.hakkindaar, .edith').css('display', 'none');

        });
       $( "#stockCode" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});

function getValue() {
  console.log($("#stockCode").val());
}

      }

and I want to add a autocomplete in this HTML line:

<div class="yyop">
   <div class="gloyy"><input type="txt" class="yseh" title='Tags' id='stockCode' autofocus></div>
   <div class="gloyy"><input type="txt" class="yseh"></div>
</div>

Here is my demo page:

CODEPEN

Upvotes: 2

Views: 2460

Answers (1)

Lorenzo Marcon
Lorenzo Marcon

Reputation: 8169

It's about z-indexing. Add the following CSS:

.ui-autocomplete, ui-autocomplete-input {z-index:1000}

Also, the positioning of autocomplete code is not right. Move it inside the $(document).ready main block, e.g.:

$(document).ready(function(){
  $( "#stockCode" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
  });
  // other stuff
}

Upvotes: 2

Related Questions