//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. Oracle 正则表达式使用示例

    正则表达式的基本例子 在使用这个新功能之前,您需要了解一些元字符的含义.句号 (.) 匹配一个正规表达式中的任意字符(除了换行符).例如,正规表达式 a.b 匹配的字符串中首先包含字母 a,接着是其它 ...

  2. Intent传递数据的方法

    一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...

  3. hadoop的自定义数据类型和与关系型数据库交互

    最近有一个需求就是在建模的时候,有少部分数据是postgres的,只能读取postgres里面的数据到hadoop里面进行建模测试,而不能导出数据到hdfs上去. 读取postgres里面的数据库有两 ...

  4. js图片左右旋转

    图片显示 <p> <a href="images/example2.jpg" rel="lightbox-group" title=" ...

  5. HDU 3605：Escape（最大流+状态压缩）

    http://acm.hdu.edu.cn/showproblem.php?pid=3605 题意:有n个人要去到m个星球上,这n个人每个人对m个星球有一个选择,即愿不愿意去,"Y" ...

  6. 让 MySQL 在 Linux 下表名不区分大小写(实为表名全小写)

    把 Windows 下的应用部署到 Linux 下,使用到了 Quartz 集群的特性,所以建了 MySql 的中间表,一启动看到报错: Invocation of init method faile ...

  7. Mybatis Generator生成工具配置文件详解

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  8. Selenium 面试题总结（乙醇Blog记录的面试题）

    ###selenium中如何判断元素是否存在? - isElementPresent   ###selenium中hidden或者是display ＝ none的元素是否可以定位到? - 不能   # ...

  9. Upload java coed in Ubuntu(在Linux 16上，上传代码)

    指令如下:(按照如下指令顺序执行即可) 1.git status  (注释:可以查看哪些代码改动了) 2.git add .     (注意:不要漏掉add后面的" . ",将本地 ...

  10. Android 开机自启服务

    package com.example.lenovo.guangbo; import android.app.Service; import android.content.Intent; impor ...