jquery - JQuery 自动完成问题

Question

我知道已经有很多与 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 内置的调试器，但它没有显示任何错误。用户界面根本不起作用。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>

在我的头文件中。为什么它不起作用？

score 1 · Accepted Answer

在您的 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()

score 0 · Accepted Answer

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);
        });

score 0 · Accepted Answer

从 1.9.0 升级，自动完成条目的下拉列表被其他 UI 组件隐藏。但是，控制功能有效。在开发人员工具 (F12) 中，您可以看到渲染组件需要更多时间。此时，自动完成字段的类从

medium required ui-autocomplete-input

到

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

然后回来。

该列表从右侧字段的正下方开始，但不在顶部。从 1.8.3 迁移后，手风琴发生了类似的问题。

jquery - JQuery 自动完成问题

3 回答 3

Related

Reference