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) {

        }
    });
});