jQuery自动完成用户界面-不起作用

分享知识

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

我已经成功做到了，所以我的数据库将返回适当的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
                    });
                }
            });
    } 
});

dfsq

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

另外，您不需要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
                };
            }))
        });
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。