//demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mockjax.js"></script>
<script src="js/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var countries ={}

//分组模糊搜索

var countries ={};

var phoneNumberTeams = ['15556785678', '15567895678','15556896789','18867891235','13856235678','1397890456'];

var roomNumberTeams = [ '8888','8899','8866','8800','6688','6666','8886','6600'];

var nameNnmberTeams = ['郭德纲','岳云鹏','成龙','刘德华','angelababy','8古天乐'];

var phoneNumber = $.map(phoneNumberTeams, function (team) { return { value: team, data: { category: '手机号' }}; });

var roomNumber = $.map(roomNumberTeams, function (team) { return { value: team, data: { category: '房间号' } }; });

var nameNnmber = $.map(nameNnmberTeams, function (team) { return { value: team, data: { category: '姓名' } }; });

var teams = phoneNumber.concat(roomNumber,nameNnmber);

$('#indentSearchAutoComplete').devbridgeAutocomplete({

lookup: teams,

minChars: 1,

onSelect: function (suggestion) {

 $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);

 },

showNoSuggestionNotice: true,

noSuggestionNotice: '对不起，没有搜索结果',

groupBy: 'category'

});

</script>
<title></title>
</head>
<body>
<h2>支持分组</h2>
<p>手机号/房号/姓名</p>
<div>
<input type="text" name="country" id="autocomplete"/>
</div>
</body>
</html>

链接地址 https://www.devbridge.com/sourcery/components/jquery-autocomplete/

jquery.autocomplete 模糊查询 支持分组的更多相关文章

  1. T-SQL - query03_去重查询|模糊查询|排序|分组|使用函数

    时间:2017-09-29 整理:byzqy 本篇仍以"梁山好汉"数据表为例,介绍几个常用的 T-SQL 查询语句: 去重查询,关键字:distinct 使用通配符模糊查询,关键字 ...

  2. jquery.select2 模糊查询

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link re ...

  3. SqlServer 多表连接、聚合函数、模糊查询、分组查询应用总结（回归基础）

    --exists 结合 if else 以及 where 条件来使用判断是否有数据满足条件 select * from Class where Name like '%[1-3]班' if (not ...

  4. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  5. 表单模糊查询的三种简单方式（springboot-h2-mybatis）

    前几天运营提到说后台管理系统有几个地方想要模糊查询..   想了下是简单的,就是要注意以前方法的被调用情况,进行增量改动,以免牵一发而动全身.整理一波记录下(本次案例是按名字模糊查询学生信息). 三种 ...

  6. jquery.tagsinput的使用例子，包括模糊查询后端代码

    <link rel="stylesheet" type="text/css" href="~/lib/jquery.tagsinput.jurg ...

  7. （四）MySQL条件查询（通配符、模糊查询）、排序查询、分组查询（单行、分组函数）

    一.条件查询 1.含义:前面学的基础查询可以查询一个或多个字段,如果需要的数据仅仅是其中的某一行或多行就用到了条件查询. 2.语法:(序号表示语句执行顺序) SELECT 字段名 ③ FROM 表名 ...

  8. 关系数据库SQL之基本数据查询:子查询、分组查询、模糊查询

    前言 上一篇关系数据库常用SQL语句语法大全主要是关系型数据库大体结构,本文细说一下关系型数据库查询的SQL语法. 语法回顾 SELECT [ALL|DISTINCT] <目标列表达式>[ ...

  9. winform中ComboBox利用AutoComplete属性实现模糊查询（有缺陷）

    上一篇文章是用ComboBox里面的原生事件实现模糊查询,操作比较灵活一些,但是收到评论说,利用AutoComplete属性就可以实现模糊查询,但是据本人所了解,AutoComplete虽然能够方便的 ...

随机推荐

  1. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  2. .NET分布式事务处理

    在进行数据持久化的时候,我们会经常用到事务处理.一般情况下,ADO.NET中的事务处理就能够满足我们的需要,但是,ADO.NET中的事 务不能同事对多个数据库连接进行原子性的操作:如果在你的业务环境中 ...

  3. Database cannot be started in this edition of SQL Server" error when restoring a Microsoft Dynamics CRM database

    处理办法:http://support.microsoft.com/kb/2567984

  4. Welogic中的JMS

    WebLogic JMS 概述 企业消息传递系统使得应用程序能够通过消息的交换与其他系统之间进行通信.消息是包含协调不同应用程序之间通信所需信息的请求.报告和/或事 件.消息提供了提取级别,使您能够从 ...

  5. Weblogic AdminServer启动失败，<Security> <BEA-090870> <The realm "myrealm" failed to be loaded

    服务器重装,环境配置正常,domain没有变动,启动AdminServer失败. AdminServer_log: <2016-9-29 上午09时43分12秒 GMT+08:00> &l ...

  6. angular.extend()和 angular.copy()的区别

    1.angular.copy angular.copy(source, [destination]);  // source: copy的对象. 可以使任意类型, 包括null和undefined. ...

  7. sass心得

    1.sass的安装:(1)下载安装Ruby,记得安装的时候勾选第二项,(2)打开控制面板gem install sass(人品好的话,一下子就能安装成功)(3)如果(2)安装不成功进行一下步骤:gem ...

  8. 【转载】Tomcat崩溃事件

    转载地址:http://www.blogjava.net/tedeyang/archive/2008/06/04/205740.html Tomcat崩溃事件 今天一大早产品一部项目经理就来找我,他们 ...

  9. Unity3D心得分享

    本篇文章的内容以各种tips为主,不间断更新 系列文章 =========================== "Unity测试系列"文章索引 Unity-Animator深入系列 ...

  10. discuz教程：discuz模板js与jQuery冲突的解决方案

    今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...