jquery自动完成不过滤数据

Question

我正在研究Jquery UI自动完成以根据我输入的文本提取数据和piopulate.

1. 在文本框中键入文本时会填充数据
2. 问题是数据未根据我输入的内容进行过滤.

下面的代码会出现什么问题

<input type=text id="tbxPG">

<script type="text/javascript">
     $(document).ready(function (){ 
        $("#tbxPG").autocomplete({ 
            source: function (request, response) { 
                    $.ajax({ 
                        dataType: "json", 
                        data: { term: request.term, }, 
                        type: 'Get', 
                        contentType: 'application/json; charset=utf-8', 
                        xhrFields: { withCredentials: true }, 
                        crossDomain: true, 
                        cache: true, 
                        url: 'myURL',
                         success: function (data) {
                            response($.map(data.value, function (item) { return { label: item.Name, value: item.Name } })); }, error: function (data) {

                        }
                    });
            },
            minLength: 3,
            open: function () {

            },
            close: function () {

            },
            focus: function (event, ui) {

            },
            select: function (event, ui) {

            }
        });
    });
</script>

Answer 1

由于您有一个获取数据的ajax请求,因此最好从每次加载数据并在本地过滤数据的服务器中发送过滤后的数据.

但是,如果你不能这样做,在最坏的情况下尝试

$(document).ready(function () {
    $("#tbxPG").autocomplete({
        source: function (request, response) {
            $.ajax({
                dataType: "json",
                data: {
                    term: request.term,
                },
                type: 'Get',
                contentType: 'application/json; charset=utf-8',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                cache: true,
                url: 'myURL',
                success: function (data) {
                    var array = $.map(data.value, function (item) {
                        return {
                            label: item.Name,
                            value: item.Name
                        }
                    });

                    //call the filter here
                    response($.ui.autocomplete.filter(array, request.term));
                },
                error: function (data) {

                }
            });
        },
        minLength: 3,
        open: function () {

        },
        close: function () {

        },
        focus: function (event, ui) {

        },
        select: function (event, ui) {

        }
    });
});

另一种解决方案是在dom ready下加载资源,然后使用该数组创建aucomplete

$(document).ready(function () {
    //load the array first, it will happen only once - this is to be done if you are dealing with a small static data set
    $.ajax({
        dataType: "json",
        data: {
            term: request.term,
        },
        type: 'Get',
        contentType: 'application/json; charset=utf-8',
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        cache: true,
        url: 'myURL',
        success: function (data) {
            var array = $.map(data.value, function (item) {
                return {
                    label: item.Name,
                    value: item.Name
                }
            });

            //create the auto complete once the ajax request is completed
            $("#tbxPG").autocomplete({
                source: array,
                minLength: 3,
                open: function () {

                },
                close: function () {

                },
                focus: function (event, ui) {

                },
                select: function (event, ui) {

                }
            });
        },
        error: function (data) {

        }
    });
});

如果你想缓存的另一个解决方案是使用如下所示的本地缓存(使用变量)(未经测试) - 这里数组只加载一次,如果它已经加载然后再使用ajax而不是再使用ajax我们使用的值排列

$(document).ready(function () {
    var array;
    $("#tbxPG").autocomplete({
        source: function (request, response) {
            if (array) {
                response($.ui.autocomplete.filter(array, request.term));
            } else {
                $.ajax({
                    dataType: "json",
                    data: {
                        term: request.term,
                    },
                    type: 'Get',
                    contentType: 'application/json; charset=utf-8',
                    xhrFields: {
                        withCredentials: true
                    },
                    crossDomain: true,
                    cache: true,
                    url: 'myURL',
                    success: function (data) {
                        array = $.map(data.value, function (item) {
                            return {
                                label: item.Name,
                                value: item.Name
                            }
                        });

                        //call the filter here
                        response($.ui.autocomplete.filter(array, request.term));
                    },
                    error: function (data) {

                    }
                });
            }
        },
        minLength: 3,
        open: function () {

        },
        close: function () {

        },
        focus: function (event, ui) {

        },
        select: function (event, ui) {

        }
    });
});