1

JQuery オートコンプリート UI ウィジェットに関連する問題がすでにたくさんあることは知っていますが、どれもうまくいきませんでした。ここで提示されたソースに基づいてコードを書いているだけです: http://jqueryui.com/autocomplete/ これは私の 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は単に機能しません。alert() 行に正しいデータが表示されるため、ajaxは正常に動作します。私もインポートしました：

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

私のヘッダーファイルで。なぜ機能しないのですか？

4

3 に答える 3

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

于 2013-02-07T02:19:50.793 に答える
0

ajax リクエストは非同期です。したがって、ソースを設定すると、ajax リクエストはまだ返されておらず、availableSchools =[]. async:false を使用して ajax リクエストを呼び出すこともできます。これはお勧めできません。または、オートコンプリートを done 関数に移動することもできます。 


     $('#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);
        });
于 2013-02-07T02:35:25.290 に答える