jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery自动完成不过滤数据大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究 Jquery UI自动完成以根据我输入的文本提取数据和piopulate.

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

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

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

解决方法

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

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

$(document).ready(function () {
    $("#tbxPG").autocomplete({
        source: function (request,responsE) {
            $.ajax({
                dataType: "json",data: {
                    term: request.term,xhrFields: {
                    withCredentials: true
                },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) {

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

        },close: function () {

        },ui) {

        },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,xhrFields: {
            withCredentials: true
        },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,open: function () {

                },close: function () {

                },ui) {

                },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,xhrFields: {
                        withCredentials: true
                    },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) {

                    }
                });
            }
        },ui) {

        }
    });
});
@H_874_36@

大佬总结

以上是大佬教程为你收集整理的jquery自动完成不过滤数据全部内容,希望文章能够帮你解决jquery自动完成不过滤数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。