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

Question

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

<script>
$(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 $("<li></li>")
                    .data("item.autocomplete", item);
            };
        });
</script>
<script>
$(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 $("<li></li>")
                    .data("item.autocomplete", item);
            };
        });
</script>

<input type="text" id="lok">
<input type="text" id="img">

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 $("<li></li>")
            .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 $("<li></li>")
            .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 $("<li></li>")
                    .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 $("<li></li>")
                    .data("item.autocomplete", item);
            };

}

        });