jQuery自动完成显示搜索项目

时间:2015-06-09 07:56:46

标签: javascript jquery json jquery-ui autocomplete

jQuery自动完成如何将输入字与json对象中的列表匹配。当我开始在输入字段中输入一些单词时,jQuery会显示错误的结果。我认为autocomplete只显示来自json对象的列表。不知道这个autocoplete有什么问题。所以,如果你愿意给我建议,以其他方式解决这个问题。 当我在serachbox结果中选择一些值时,此代码会将所有结果作为值附加到其他输入。这是我的代码:

的jQuery

$( document ).ready(
$("#get_search").autocomplete({
                source: function( request, response ) {
                $.ajax({
                    url: "/organizations/",
                    type: "GET",
                    dataType: "json",
                    data: {term: request.term},
                    contentType: "application/json; charset=utf-8",
                    success: function(data) {
                                response($.map(data, function(item) {
                                console.log(item.name);
                                return {

                                    org_name: item.name,
                                    oib: item.oib,
                                    address: item.address,
                                    city: item.city,
                                    postal_code: item.postal_code

                                    };
                            }));
                        }
                    });
                },
                minLength: 2,
                scroll: true,
                select: function(event, ui) {
                    //this.value = ui.item.org_name;
                    //console.log(ui.item.org_name+' '+ui.item.oib+' '+ui.item.address);
                    $('#get_search').val(ui.item.org_name);
                    $('#oib').val(ui.item.oib);
                    $('#address').val(ui.item.address);
                    $('#city').val(ui.item.city);
                    $('#postal_code').val(ui.item.postal_code);
                    return false;
                }

            }).data("autocomplete")._renderItem = function(ul, item) {
    return $("<li>").data("item.autocomplete", item).append("<a><strong>" + item.org_name + "</strong><br>" + item.oib + " - " + item.address + " - " + item.city + "</a>").appendTo(ul);
});

json对象

[
    {
        "id": "8",
        "oib": "213214214",
        "name": "asdasdd",
        "address": "asdad",
        "city": "asdasd",
        "postal_code": "asdads"
    },
    {
        "id": "8",
        "oib": "213214214",
        "name": "asdasdd",
        "address": "asdad",
        "city": "asdasd",
        "postal_code": "asdads"
    },
    {
        "id": "8",
        "oib": "213214214",
        "name": "asdasdd",
        "address": "asdad",
        "city": "asdasd",
        "postal_code": "asdads"
    },
    {
        "id": "8",
        "oib": "213214214",
        "name": "asdasdd",
        "address": "asdad",
        "city": "asdasd",
        "postal_code": "asdads"
    },
]

的HTML

<input class="form-control  ui-autocomplete-input" id="get_search" name="form1-name" type="text" autocomplete="off">

0 个答案:

没有答案