javascript - jQuery 自动完成多个项目不起作用

Question

我正在研究 jQuery 自动完成，它作为 <ul> 中的两个项目.

我从 $.getJSON 函数获取 json 项目，json 对象如下所示:

[{
     "merchant_name": "Myntra",
     "merchant_details": "Flat Rs.225 Cashback"
}, {
     "merchant_name": "Adlabs imagica",
     "merchant_details": "Rs 170 per sale"
}, {
     "merchant_name": "godaam",
     "merchant_details": "Rs 140 per sale"
}, {
     "merchant_name": "Homeshop18",
     "merchant_details": "Upto 8% Cashback"
}]

我的函数如下所示:

$('#search_bar').keyup(function(e) {
    var searched = $('#search_bar').val()
    $.getJSON('<?php echo base_url();?>get_data', 'title=' + searched, function(result) {
        var elements = [];
        $.each(result, function(i, val) {
            elements.push({
                'merchant_name': val.merchant_name,
                'merchant_details': val.merchant_details
            })
        }) $('#search_bar').autocomplete({
            delay: 0,
            source: elements,
            select: function(event, ui) {
                $("input#search_bar").val(ui.item.merchant_name + " / " + ui.item.merchant_details);
                $("#get").click();
            }.data("autocomplete")._renderItem = function(ul, item) {
                return $("<li></li>").data("item.autocomplete", item).append("<a><strong>" + item.merchant_name + "</strong> / " + item.merchant_details + "</a>").appendTo(ul);
            };
        })
    })
});

我无法继续。

请帮我解决这个问题。

Answer 1

这是我为我的一个项目编写的，它运行得很好。我不确定为什么当自动完成功能为您检测到键盘输入时，您会检测到键盘输入...但是此代码片段应该为您提供所需的所有功能。

$("#edit_profile .location").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: BASE_URL + "lib/ajax.php",
                type: "GET",
                data: "autocomplete_location=1&term=" + request.term,
                cache: false,
                success: function(resp) {
                    try {
                        json = $.parseJSON(resp);
                    } catch (error) {
                        json = null;
                    }
                    //
                    if (json && json.status == "OK") {
                        //
                        response($.map(json.predictions, function(item) {
                            return {
                                label: item.description,
                                value: item.description
                            }
                        }));
                        //
                    }
                }
            });
        },
        minLength: 1,
        change: function (event, ui) {
            if (!ui.item){
                $(this).val("");
            }
        }
    });