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>

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

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

Answer 2

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

Answer 3

从1.9.0升级后，其他UI组件隐藏了自动填充条目的下拉列表。但是，控制功能有效。在开发人员工具（F12）中，您可以看到渲染组件需要更多时间。在这段时间内，自动填充字段的类从

更改

medium required ui-autocomplete-input

到

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

然后回来。

列表从右侧字段的正下方开始，但不在顶部。从1.8.3迁移后，手风琴出现了同样的问题。

JQuery自动完成问题

3 个答案: