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

所以我的页面上有两个文本字段，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">

$（函数（）{
$（“#img”）.自动完成({
最小长度：3，
来源：功能（请求、响应）{
$.ajax（{
url:“q/qfolder.php”，
数据类型：“json”，
数据：{
q:$（“#img”）.val（），
}, 
成功：函数（数据）{
答复（数据）；
} 
}); 
},
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
});
$（函数（）{
$（“#乐”）.自动完成({
最小长度：2，
来源：功能（请求、响应）{
$.ajax（{
url:“q/qlok.php”，
数据类型：“json”，
数据：{
q:$（“#乐”）.val（），
}, 
成功：函数（数据）{
答复（数据）；
} 
}); 
},
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
});

JSONs是一维的，如此安静简单的反应。我读过很多类似的文章，但都没有解决我的问题。遗憾的是，我对jQuery几乎没有什么经验。

试试这个：-

$(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);
            };

}

        });

$（文档）.ready（函数（）{
SearchImg（）；
SearchLok（）；
函数SearchImg（）{
$（“#img”）.自动完成({
最小长度：3，
来源：功能（请求、响应）{
$.ajax（{
url:“q/qfolder.php”，
数据类型：“json”，
数据：{
q:$（“#img”）.val（），
}, 
成功：函数（数据）{
答复（数据）；
} 
}); 
},
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
}
函数SearchLok（）{
$（“#乐”）.自动完成({
最小长度：2，
来源：功能（请求、响应）{
$.ajax（{
url:“q/qlok.php”，
数据类型：“json”，
数据：{
q:$（“#乐”）.val（），
}, 
成功：函数（数据）{
答复（数据）；
} 
}); 
},
})
.数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
}
});

删除之前的.data（“自动完成”）。\u renderItem

对于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);
    };
});

$（函数（）{
$（“#乐”）.自动完成({
最小长度：1，
来源：功能（请求、响应）{
$.ajax({
url:“http://gd.geobytes.com/AutoCompleteCity",
数据类型：“jsonp”，
数据：{
问：请求.期限
},
成功：功能（数据）{
答复（数据）；
}
});
},
})
._renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
});
$（函数（）{
$（“#img”）.自动完成({
最小长度：1，
来源：功能（请求、响应）{
$.ajax({
url:“http://gd.geobytes.com/AutoCompleteCity",
数据类型：“jsonp”，
数据：{
问：请求.期限
},
成功：功能（数据）{
答复（数据）；
}
});
},
})
._renderItem=功能（ul，项目）{
返回$（“
”）
.数据（“项.自动完成”，项）；
};
});

您能制作JSFIDLE吗？必须编辑并上传一些文件进行搜索。坚持根本不能让它在小提琴中工作，但你至少有一些东西可以玩，链接可以正常工作如果你不在过程中重构它们，让两个自动完成初始化器成为两个函数有什么意义？看起来也不起作用。谢谢你的努力！