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);
                }
            });
        });

转载于:https://www.cnblogs.com/mickeyooo/archive/2012/06/13/2547233.html

jqueryui autocomplete 控件自定义source检索相关推荐

自定义android控件：快速检索QuickSearch
文章目录上效果图逻辑骨架赋予UI UI封装 quick_search_layout.xml item_ordered_list.xml 使用 Android有自带的下拉选择控件Spinner.问 ...
JQuery--使用autocomplete控件进行自己主动输入完毕（相当于模糊查询）
之前为了实现这个功能花了我几天的时间. 事实上.实现了之后发现也就那么回事,正所谓万事开头难嘛.. 废话不多说了.这里我使用的是JQuery控件库中的一个Autocomplete控件.即Autocom ...
Asp.net Ajax AutoComplete 控件的用法
AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果. AutoComplete控件的用法很简单,只要在 ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
一起谈.NET技术，asp.net Ajax ---AutoComplete控件使用
简介: AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便. 重要属 ...
【第3版emWin教程】第55章 emWin6.x按钮Button控件自定义回调函数，实现各种按钮效果
教程不断更新中:链接第55章 emWin6.x按钮Button控件自定义回调函数,实现各种按钮效果本章节为大家讲解按钮控件自定义回调函数,通过其回调函数就可以实现各种按钮效果.这方面的 ...
ASP.NET技巧：GridView控件自定义分页详解第一页
ASP.NET技巧:GridView控件自定义分页详解日期:2007年9月11日作者: 查看:[大字体中字体小字体] <script src="../gg/info468.js ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
视频教程-C++ Qt5进阶之复杂控件自定义2-C/C++
C++ Qt5进阶之复杂控件自定义2 先后就职于德国BOSCH,iBabyLabs等企业担任架构设计师,主程, 精通嵌入式Linux,iOS,Android底层开发,音视频,网络通讯协议/流媒体开发. ...

jqueryui autocomplete 控件自定义source检索

jqueryui autocomplete 控件自定义source检索相关推荐

最新文章

热门文章