• jqueryui autocomplete 控件自定义source检索


    有时侯我们在做自动完成时为了从多字段去检索,往往会发起个ajax请求让服务端去实现。对于这种数据集固定不变的数据源这种做法显然给服务器增加了不少请求。

    实际上jqueryui autocomplete 控件已经帮用户考虑好了这有方面需求,我们只要给source属于实现个自定义的函数即可做到。原理请查看相关文档,和以往一样我就直接上示例代码喽!

            $(function () {
                var cities = [
                    { thrC: "SHA", initial: "sh", en: "shanghai", zh_CN: "上海" },
                    { thrC: "BJS", initial: "bj", en: "beijing", zh_CN: "北京" },
                    { thrC: "LON", initial: "ld", en: "london", zh_CN: "伦敦" },
                    { thrC: "PAR", initial: "bl", en: "paris", zh_CN: "巴黎" },
                    { thrC: "NYC", initial: "ny", en: "new york", zh_CN: "纽约" },
                    { thrC: "LAX", initial: "lsj", en: "los angeles", zh_CN: "洛杉矶" },
                ],
                dialg = $('#dialog');
                $("#tags").autocomplete({
                    autoFocuus: true,
                    source: function (req, res) {
                        var city = req.term,
                            result = [];
                        if (city) {
                            var searchResult = $.map(
                                (city ? $.grep(cities, function (value) {
                                    return value.initial.toString().indexOf(city) == 0 ||
                                        value.en.indexOf(city) == 0 ||
                                        value.zh_CN.indexOf(city) == 0 ||
                                        value.thrC.indexOf(city) == 0;
                                }) : cities),
                                function (value) {
                                    return { label: value.zh_CN + "(" + value.thrC + ")", tc: value.thrC };
                                });
                            result = result.concat($.makeArray(searchResult));
                        }
                        res(result);
                    },
                    select: function (event, ui) {
                        $('#from_city').val(ui.item.tc);
                    }
                });
            });
    <body>
        <input type="text" name="fromCity" id="tags" />
        <input type="hidden" name="from_city" id="from_city" />
    </body>
  • 相关阅读:
    cf Round 633
    Django学习手册
    Django学习手册
    Django学习手册
    Django学习手册
    Django学习手册
    Django学习手册
    ERROR CL .exe……错误
    DLL、lib等链接库文件的使用
    HTTP协议
  • 原文地址:https://www.cnblogs.com/mickeyooo/p/2547233.html
Copyright © 2020-2023  润新知