//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. 有关css伪类visited样式无效的解决方法

    错误写法 将visited写在hover和active之后,例如: .ui-page-theme-a .digilinx-ui-btn{background:#00a325;border-color: ...

  2. C语言初学者代码中的常见错误与瑕疵(23)

    见:C语言初学者代码中的常见错误与瑕疵(23)

  3. Jquery插件Ztree使用所遇问题

    问题1.$.fn.zTree为空或为Undefined 我在MVC中引用Jquery插件Ztree的JS并不存任何问题,而当我将Ztree的js引入项目中,就出现$.fn.zTree为空或为Undef ...

  4. 有关docker的学习链接

    本文是自己搜索的比较好的网上资源,便于有兴趣者查阅. 英文官网 https://docs.docker.com/engine/getstarted/ 中文入门手册 http://www.docker. ...

  5. php时间戳之间相互转换

    第一种情况: 将时间戳转换成年月日格式 <?php echo date('Y-m-d H:i:s',$v['apply_time']);?> 第二种情况: 将年月日转换成时间戳 strto ...

  6. Bash:-3次错误输入退出脚本

    Limit_Condition() { let count++ ]];then echo "超过3次机会,自动关停脚本" exit fi Comfirm() { count= wh ...

  7. Volley全方位解析,带你从源码的角度彻底理解

    Volley 是 Google 推出的轻量级 Android 异步网络请求框架和图片加载框架.在 Google I/O 2013 大会上发布.其适用场景是数据量小,通信频繁的网络操作. 主要特点: ( ...

  8. No row with the given identifier exists:错误另解

    这是一个hibernate常见的问题.搜索出来最多的答案都是如下面这篇文章所述: http://blog.csdn.net/eyejava/article/details/1896492 但我觉得我问 ...

  9. Python基础之条件和循环

    阅读目录 一.if语句 1.1功能 1.2语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if + else 1.2.4:多分支if + elif +else 1 ...

  10. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...