I'm stuck with the implementation of the jQuery Autocomplete. I'm using this tutorial: http://1300grams.com/2009/08/17/jquery-autocomplete-with-json-jsonp-support-and-overriding-the-default-search-parameter-q/
我坚持使用jQuery Autocomplete的实现。我正在使用这个教程:http://1300grams.com/2009/08/17/jquery-autocomplete-with-json-jsonp-support-and-overriding-the-default-search-parameter-q/
My jQuery code is this:
我的jQuery代码是这样的:
$("#quickSearchQuery").autocomplete("http://mydomain.net/json.php", {
dataType: 'json',
selectFirst: true,
minChars: 2,
max: 8,
parse: function(data) {
var rows = new Array();
data = data.members;
for(var i = 0; i < data.length; i++) {
rows[i] = { id : data[i].id, name : data[i].name, location : data[i].location };
}
return rows;
},
formatItem: function(row, i, n) {
return row.name + ' (' + row.location + ')';
}
});
A call to http://mydomain.net/json.php?q=Alb produces a JSON response like this:
对http://mydomain.net/json.php?q=Alb的调用会产生如下JSON响应:
{"query":"Alb","members":[{"id":"1","name":"Peter Albert","location":"New York"},{"id":"4","name":"Adalbert Smith","location":"Alabama"},{"id":"42","name":"Albert Einstein","location":"Vienna"}]}
My problem is: It just doesn't work. The Autocomplete doesn't appear, no elements are created. If I run the code from the tutorial, everything is fine and I get the autocompleted list of cities. But even if I only change the source URI and from data.geonames
to data.members
(and so on), the autocompleter stops working.
我的问题是:它不起作用。自动完成未显示,未创建任何元素。如果我从教程中运行代码,一切都很好,我得到自动完成的城市列表。但即使我只将源URI和data.geonames更改为data.members(等等),自动完成器也会停止工作。
What I've tried:
我尝试过的:
- I changed
dataType
to jsonp and json, but jsonp creates the 'invalid label' error on the JSON file - I modified the PHP script's content-type with
header("Content-Type: application/json");
- I tried all the other Autocompleters, but nothing changed
- I tried all the fixes I have found from responses at Stack Overflow and tutorials in the web
- I copied a JSON response from geonames.org into a file, uploaded it to my server and used this hardcoded response as lookup source. Still no autocompleter showing :(
我将dataType更改为jsonp和json,但jsonp在JSON文件上创建了“无效标签”错误
我用头文件修改了PHP脚本的内容类型(“Content-Type:application / json”);
我尝试了所有其他Autocompleters,但没有任何改变
我尝试了从Stack Overflow的响应和Web中的教程中找到的所有修复
我将geonames.org的JSON响应复制到一个文件中,将其上传到我的服务器并将此硬编码响应用作查找源。仍然没有自动填充显示:(
Maybe you got an idea?
也许你有个主意?
Thanks! Joe
1 个解决方案
#1
1
with autocomplete, you must use the property id and value to make it working. Only those properties are used to render the list.
使用自动完成功能,您必须使用属性ID和值才能使其正常工作。仅使用这些属性来呈现列表。
In your php object, declare something like this (this one comes from C#, but think that you understand it):
在你的php对象中,声明这样的东西(这个来自C#,但认为你理解它):
public class Product
{
public String id { get; set; } //must be used
public String value { get; set; } //must be used
public String marque { get; set; }
}
and return the json-serialized string to the client.
并将json序列化字符串返回给客户端。
The json is something like that
json就是这样的
[{"id":"1","value":"UMTS","comment":"umts comment"},
{"id":"2","value":"RAN","comment":"ran comment"},
{"id":"3","value":"Swap","comment":"swap comment"}]
It will be auto-mapped in your JS and the autocomplete should work for now.
它将在您的JS中自动映射,自动完成程序现在应该可以正常工作。
#1
1
with autocomplete, you must use the property id and value to make it working. Only those properties are used to render the list.
使用自动完成功能,您必须使用属性ID和值才能使其正常工作。仅使用这些属性来呈现列表。
In your php object, declare something like this (this one comes from C#, but think that you understand it):
在你的php对象中,声明这样的东西(这个来自C#,但认为你理解它):
public class Product
{
public String id { get; set; } //must be used
public String value { get; set; } //must be used
public String marque { get; set; }
}
and return the json-serialized string to the client.
并将json序列化字符串返回给客户端。
The json is something like that
json就是这样的
[{"id":"1","value":"UMTS","comment":"umts comment"},
{"id":"2","value":"RAN","comment":"ran comment"},
{"id":"3","value":"Swap","comment":"swap comment"}]
It will be auto-mapped in your JS and the autocomplete should work for now.
它将在您的JS中自动映射,自动完成程序现在应该可以正常工作。