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/

在._renderItem之前删除.data（＆＃34;自动完成＆＃34;）
对于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);
            };

}

        });

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

2 个答案: