在同一页面上的两个输入(差异ID)上的两个自动完成 [英] Two autocomplete, on two inputs (differnet id), on same page

问题描述

因此，我的页面上有两个文本字段img和lok.我希望他们两个都能自动完成来自使用输入值作为搜索字符串的另一个页面中的数据.代码中最先出现的脚本可以正常工作.下一个永远不会执行.如果我更改顺序，则它适用于其他输入，因此两者均由他们自己完成.因此，我将不得不命名一些函数名以使其与众不同?这是我的代码:

So I have two textfields on my page, img and lok. I want them both to have a autocomplete with data from another page that uses input-value as search string. The script that comes first in code works as it should. The next is never executed. If I changes order it works for the other input, so both works by them self. So I will have to make some function name to make them different? Here is my code:

<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的了解很少.

The JSONs is one dimentional, so quiet simple responses. Have read a lot of treads that was quite similar, but none resolved my problem. Sadly I have very little experience with jQuery.

推荐答案

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

1. 删除._renderItem之前的.data("autocomplete")

1. remove .data("autocomplete") before ._renderItem

对于otpion数据，请使用以下数据:{q:request.term}，

for otpion data use this data: { 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);
    };
});

这篇关于在同一页面上的两个输入(差异ID)上的两个自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！