javascript - jQuery 自动完成 UI - 不起作用

Question

我正在尝试制作一个自动完成小部件，它将显示从数据库返回的项目代码。

我已成功完成，因此我的数据库将返回适当的 JSON 响应。

现在的问题是不知道为什么下拉列表不显示。

下面是代码:

<input type="text" id="search" class="form-control" placeholder="">

<form action="post" action="" id="spareParts" class="spareparts">

</form>

$('#search').keyup(function(event) {
        var search = $(this).val();

        if($.trim(search).length){
            var arr = [];
            $.ajax({
                url: 'get_spareparts',
                type: 'POST',
                dataType: 'JSON',
                data: {item: search},
                success: function (data) {
                    arr = $.parseJSON( data );

                    console.log(arr);// CONSOLE.LOG WORKS WELL
                    //[Object { id="1", value="25.00", desc="Fuel pump", more...}]

                   // AUTOCOMPLETE DOESN'T WORK
                    $('#spareParts').autocomplete({
                        minLength:0,
                        source: arr
                    });
                }
            });
    } 
});

Answer 1

AJAX 加载数据的自动完成应该以不同的方式配置。 source属性可以是接受回调参数的函数。您应该使用从服务器加载的数据来提供此回调。

您也不需要手动绑定(bind) keyup 事件。您的代码将变为:

$('#search').autocomplete({
    minLength: 0,
    source: function(request, response) {
        $.ajax({
            url: 'get_spareparts',
            type: 'POST',
            dataType: 'JSON',
            data: {item: request.term}
        }).done(function(data) {
            response(data.map(function(el) {
                return {
                    value: el.value, 
                    label: el.desc
                };
            }))
        });
    }
});