• 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>
  • 相关阅读:
    操作系统开发系列—13.g.操作系统的系统调用 ●
    操作系统开发系列—13.f.Minix的中断处理(暂时忽略)
    操作系统开发系列—13.e.三进程
    操作系统开发系列—13.d.多进程 ●
    操作系统开发系列—解释typedef void (*int_handler) ();
    操作系统开发系列—13.c.进程之中断重入
    操作系统开发系列—13.b.进程之丰富中断处理程序
    操作系统开发系列—13.a.进程 ●
    操作系统开发系列—12.g.在内核中设置键盘中断
    操作系统开发系列—12.f.在内核中添加中断处理 ●
  • 原文地址:https://www.cnblogs.com/mickeyooo/p/2547233.html
Copyright © 2020-2023  润新知