//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. svm机器学习算法中文视频讲解

    这个是李政軒Cheng-Hsuan Li的关于机器学习一些算法的中文视频教程:http://www.powercam.cc/chli. 一.KernelMethod(A Chinese Tutoria ...

  2. node 异步编程

    node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...

  3. C#中try catch中throw ex和throw方式抛出异常有何不同

    我们在C#的try catch代码块中里面经常使用throw语句抛出捕捉到的异常,但是你知道吗使用throw ex和throw抛出捕获到的异常效果是不一样的. 异常捕捉的原理 首先先介绍一下C#异常捕 ...

  4. 【实践】用js 实现 jq 的removeClass 方法

    HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. redmine computed custom field formula tips

    项目中要用到Computed custom field插件,公式不知道怎么写,查了些资料,记录在这里. 1.http://apidock.com/ruby/Time/strftime 查看ruby的字 ...

  6. 20145227&20145201 《信息安全系统设计基础》实验四

    北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)鄢曼君 李子璇 学号:(按贡献大小排名)20145227 20145201 成绩: ...

  7. [OSG]矩阵运算

    我们都知道,OpenGL规定矩阵使用列主序存储,即glLoadMatrix等函数要求输入的数组是按列主序存储的矩阵.然而,一个很奇怪的事实是,OSG中矩阵存储是使用的标准C二维数组(行主序),并且也是 ...

  8. 【转】工控老鬼】西门子S7200入门&精通【1】S7200硬件大全

    转载地址:http://blog.sina.com.cn/s/blog_669692a601016i5f.html     工控老鬼提醒以下的信息和资料可能不全或者不准确,如有疑问可以查阅西门子中国网 ...

  9. android ViewPager使用遇到的问题

    项目需求是需要实现一个有两页可滑动的界面,就想到了使用ViewPager,在实现是没有深入考虑,就直接使用了PagerAdapter,页面是正常实现了,可是发现无法流畅的刷新页面(直接使用notify ...

  10. 笔记汇总.md

    ```javascript 1.js对象,value的值取不到,试着将引入的js文件放到body的后面 $("input[type='time']").change( functi ...