2013-02-07 235 views
1

我知道已經有一堆與JQuery自動完成UI小部件相關的問題,但沒有一個能夠工作。基於這裏所呈現的來源我只是寫代碼:http://jqueryui.com/autocomplete/ 這是我的jQuery代碼:JQuery自動完成問題

<script type="text/javascript"> 
$(document.body).ready(function(){ 
    $('#txtcity').keypress(function(){ 
     $("#txtschool").removeAttr('disabled'); 
     $("#txtschool").val(''); 
    }); 

    $('#txtcity').focusout(function(){ 
     if($('#txtcity').val()!=""){ 
      var availableSchools = []; 
      $.ajax({ 
       url: "do_findschools.php?city="+$('#txtcity').val() 
      }).done(function(data){ 
       availableSchools = data.split(','); 
       alert(data); 
      }); 

      $('#txtschool').autocomplete({ 
       source: availableSchools, 
       dataType: "json" 
      }); 
     } 
    }); 
}); 

</script> 

那樣簡單,因爲它是,當我在txtschool型的東西,沒有彈出。我還使用內置在調試器中的Chrome,但沒有顯示任何錯誤。 UI根本不起作用。 ajax 正常工作,因爲我在alert()行看到正確的數據。我還導入了:

<link href="jquery/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" /> 
<script src="jquery/js/jquery-1.9.0.js" type="text/javascript"></script> 
<script src="jquery/js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script> 

在我的頭文件中。 爲什麼它不起作用?

+0

可能是'$(document).ready()'?自動完成本身[適用於我](http://jsfiddle.net/oceog/hfNdg/) –

+0

也更好地在請求中使用json,btw *爲什麼你們在使用'post'時使用複雜的'ajax'方法,以及'get'?* –

回答

1

初始化小部件的代碼正在執行之前您的AJAX請求返回。如果您將alert放置在初始化自動填充的位置,則availableSchools將爲空。

將您自動完成初始化done功能的內部代碼:

$.ajax({ 
    url: "do_findschools.php?city="+$('#txtcity').val() 
}).done(function(data){ 
    availableSchools = data.split(','); 
    $('#txtschool').autocomplete({ 
     source: availableSchools, 
     dataType: "json" 
    }); 
}); 

另外,我想你想$(document).ready(),而不是$(document.body).ready()

+0

我明白了......現在看起來很簡單。測試它並且運行良好。謝謝! – DarrenVortex

+0

@ user2041139:沒問題! –

0

Ajax請求是異步。所以當你設置源時,ajax請求還沒有返回,並且availableSchools = []。您可以使用async:false來調用ajax請求。這不被推薦。或者您可以將自動完成功能移入完成功能。


    $('#txtcity').focusout(function(){ 
     if($('#txtcity').val()!=""){ 
      var availableSchools = []; 
      $.ajax({ 
       url: "do_findschools.php?city="+$('#txtcity').val() 
      }).done(function(data){ 
       availableSchools = data.split(',');

$('#txtschool').autocomplete({ source: availableSchools, dataType: "json" alert(data); });
0

從1.9.0升級,自動完成條目的下拉列表被其他UI組件隱藏。 但是,控制功能起作用。 在開發人員工具(F12)中,您可以看到渲染組件花費了意想不到的時間。在這個時候,班裏的自動完成場變化從

medium required ui-autocomplete-input 

medium required ui-autocomplete-input ui-autocomplete-loading 

,然後返回。

該列表從右側下方開始,但不在頂部。 從1.8.3遷移後出現類似問題。

enter image description here