弹出窗口中的jquery自动完成

Question

我试图在弹出窗口中进行自动完成。但它不起作用。任何人都可以帮助我吗？

这是我的弹出窗口代码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()); 
} 

     } 

，我想在这个HTML行添加一个自动完成：

<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> 

这是我的演示页：

CODEPEN

Answer 1

这是关于z-indexing。添加以下CSS：

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

此外，自动完成代码的定位不正确。将其移动到$(document).ready主区块内，例如：

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