彈出窗口中的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 
}