两个输入（不同的ID）上的两个自动完成，在同一页面上

所以我的页面上有两个文本域，img和lok。 我希望他们两个都使用来自另一个页面的数据自动完成，该数据使用输入值作为搜索字符串。 代码中首先出现的脚本可以正常工作。 下一个永远不会执行。 如果我改变顺序，它适用于其他输入，所以两者都由他们自己工作。 所以我将不得不制作一些函数名称以使它们不同？ 这是我的代码：

 $(function () { $("#img").autocomplete({ minLength: 3, source: function (request, response) { $.ajax({ url: "q/qfolder.php", dataType: "json", data: { q: $("#img").val(), }, success: function (data) { response(data); } }); }, }) .data("autocomplete")._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; });   $(function () { $("#lok").autocomplete({ minLength: 2, source: function (request, response) { $.ajax({ url: "q/qlok.php", dataType: "json", data: { q: $("#lok").val(), }, success: function (data) { response(data); } }); }, }) .data("autocomplete")._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; });    

JSON是一个单一的，如此安静的简单响应。 已经阅读了很多相似的踏板，但没有解决我的问题。 可悲的是，我对jQuery的经验很少。

Answer 1

http://jsfiddle.net/c4fwycfm/2/

1. 在._renderItem之前删除.data（“autocomplete”）

2. 对于otpion数据使用此数据：{q：request.term}，

JQ：

 $(function () { $("#lok").autocomplete({ minLength: 1, source: function (request, response) { $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", data: { q: request.term }, success: function (data) { response(data); } }); }, }) ._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; }); $(function () { $("#img").autocomplete({ minLength: 1, source: function (request, response) { $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", data: { q: request.term }, success: function (data) { response(data); } }); }, }) ._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; }); 

Answer 2

试试这个：-

 $(document).ready(function () { SearchImg(); SearchLok(); function SearchImg() { $("#img").autocomplete({ minLength: 3, source: function (request, response) { $.ajax({ url: "q/qfolder.php", dataType: "json", data: { q: $("#img").val(), }, success: function (data) { response(data); } }); }, }) .data("autocomplete")._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; } function SearchLok(){ $("#lok").autocomplete({ minLength: 2, source: function (request, response) { $.ajax({ url: "q/qlok.php", dataType: "json", data: { q: $("#lok").val(), }, success: function (data) { response(data); } }); }, }) .data("autocomplete")._renderItem = function (ul, item) { return $("
") .data("item.autocomplete", item); }; } });