jquery ajax自动完成,使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)

使用AJAX进行JQuery自动完成(JQuery Autocomplete with AJAX)

我正在尝试编写一个JQuery自动完成脚本，它将通过AJAX调用url并在用户将数据输入表单时更新自动完成结果。

我有我的AJAX设置，目前正在返回JSON。 但我不知道如何获得自动完成功能来调用它并使用响应。 我设法让以下工作，但这是静态数据，所以对我的任务没有好处：

$("input#name").autocomplete({

source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]

});

干杯。

I'm trying to write a JQuery autocomplete script which will call a url via AJAX and update autocomplete results as user enters data into the form.

I have my AJAX setup and currently returning JSON. But I don't know how to go about getting the autocomplete function to call it and use the response. I have managed to get the following working, but this is static data, so no good for my task:

$("input#name").autocomplete({

source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]

});

Cheers.

原文：https://stackoverflow.com/questions/4387423

更新时间：2020-02-08 00:43

最满意答案

$( "#birds" ).autocomplete({

source: "search.php",

minLength: 2,

select: function( event, ui ) {

log( ui.item ?

"Selected: " + ui.item.value + " aka " + ui.item.id :

"Nothing selected, input was " + this.value );

}

});

$( "#birds" ).autocomplete({

source: "search.php",

minLength: 2,

select: function( event, ui ) {

log( ui.item ?

"Selected: " + ui.item.value + " aka " + ui.item.id :

"Nothing selected, input was " + this.value );

}

});

相关问答

$( "#firstname" ).autocomplete({

source: function( request, response ) {

$.ajax( {

url: "search.php",

dataType: "json",

data: {

te

...

首先你使用的是file.php所以数据类型不像这个dataType: "jsonp"使用它你需要进行更改 我不确定它会对你有所帮助，但如果你能管理json中的php文件的响应，例如像这样 {

"employees": [

{

"firstName": "John",

"lastName": "Doe"

},

{

"firstName": "Anna",

...

自动完成文档中的源代码完美的例子。 jQuery的

$(function() {

function log( message ) {

$( "

" ).text( message ).prependTo( "#log" );

$( "#log" ).scrollTop( 0 );

}

$( "#city" ).autocomplete({

source: function( request, respons

...

我猜你已经显示的AJAX响应(作为图像)是来自服务器的实际响应，在你的$.map()修改它之前。 你的$.map()函数迭代来自服务器的那个json响应，并且它试图在每个元素中使用c_name和c_id属性名称。 但是服务器的json不包含这些属性名称 - 它有customer_id和name 。 所以$.map()创建了一堆空元素，并将它们传递给自动完成。 然后，自动完成功能会显示一组元素，但没有任何标签，这就是为什么您会看到带有空横线的下拉列表，而不是完全没有任何内容，这就是您没有响应/匹配时

...

尝试使用div而不是span标记来表示ajax_response_city。 html搞砸了，你的选择将不再适用。 我把一个例子放在一起： http ： //jsfiddle.net/me2loveit2/86T4f/

我也会开始使用正确的html(比如在ul或ol中放置li元素)来避免这样的问题。 Try using a div instead of a span tag for

...

非常古老的问题，但今天仍然具有相关性，因为它发生在我身上，我不确定接受的答案是否涵盖所有基础，或解释问题。 发生这种情况是因为自动完成插件要求您提供带有noResults的消息对象和结果属性，以告知它如何标记搜索结果。 noResults属性应该是一个字符串，在您猜对了，没有结果时显示。 那么results属性应该是一个接受count参数的方法，并返回一个字符串。 像这样的东西： $("input").autocomplete({

source: function( request, re

...

http://jqueryui.com/demos/autocomplete/#remote $( "#birds" ).autocomplete({

source: "search.php",

minLength: 2,

select: function( event, ui ) {

log( ui.item ?

"Selected: " + ui.item.value + " aka

...

查看jQuery.ajaxError方法，它允许您为所有ajax调用设置默认错误回调; http://api.jquery.com/ajaxError/ Have a looksie at the jQuery.ajaxError method, which allows you to setup a default error callback for all ajax calls; http://api.jquery.com/ajaxError/

自动完成是jQueryUI的一部分，而不是jQuery。 在这里阅读有关自动完成的信息： https ： //jqueryui.com/autocomplete/ 。 该网站还将提供下载jquery ui的链接。 你已经包含了两个不同版本的jQuery但没有jQuery UI Autocomplete is a part of jQueryUI not jQuery. Read up about autocomplete here: https://jqueryui.com/autocomplet

...