JQuery自动完成问题

我知道已经有一堆与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>

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

来源

2013-02-07 DarrenVortex

可能是'$（document）.ready（）'？自动完成本身[适用于我]（http://jsfiddle.net/oceog/hfNdg/） –

也更好地在请求中使用json，btw *为什么你们在使用'post'时使用复杂的'ajax'方法，以及'get'？* –

初始化小部件的代码正在执行之前您的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-07 02:19:50

我明白了......现在看起来很简单。测试它并且运行良好。谢谢！ – DarrenVortex

@ user2041139：没问题！ –

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

来源

2013-02-07 02:35:25 user2049150

从1.9.0升级，自动完成条目的下拉列表被其他UI组件隐藏。但是，控制功能起作用。在开发人员工具（F12）中，您可以看到渲染组件花费了意想不到的时间。在这个时候，班里的自动完成场变化从

medium required ui-autocomplete-input

到

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

，然后返回。

该列表从右侧下方开始，但不在顶部。从1.8.3迁移后出现类似问题。

来源

2017-06-16 17:26:09 profimedica

JQuery自动完成问题

回答

相关问题