bootstrap-typeahead 自动补全简单的使用教程
参考链接：
参考1 : https://segmentfault.com/a/1190000006036166
参考2 : https://blog.csdn.net/u010174173/article/details/53227583
参考3 : https://www.cnblogs.com/haogj/p/3376874.html
参考4 : https://www.cnblogs.com/shiyu404/p/6344591.html
参考5 : https://blog.csdn.net/lanxuezaipiao/article/details/48193525
官网 : http://twitter.github.io/typeahead.js/
1、bootstrap-typeahead 自动补全简单的使用教程，自动补全，使用起来看似很厉害的样子，同事使用的select2，我们老总建议我用的是typehead，发现typehead并不是很好使，先简单把使用过程总结一下，然后再使用select2看看，那个更加方便一些吧，毕竟用起来心累的东西，确实很难受啊。参考链接比较多，个人也可以自行参考，谢谢。
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jQuery-2.1.3.min.js"></script>
<script src="js/typeahead.jquery.min.js"></script>
<script src="js/bloodhound.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
项目结构如下所示：
2、页面代码如下所示：
案例一，是定义一个变量，所搜索的都是变量里面的值的时候，可以进行自动补全功能。
案例二，使用的是本地json文件，文件名称为json/provinces.json。
案例三，使用的也是本地的json文件，文件名称为json/GetCities?q=%QUERY。
案例四，是使用ajax从后台查询出的数据，这个自己摸索的格外头疼，一开始不知道source方法的query参数如何传递进行的，其实使用案例四的格式以后，
就将query的数据传递进去了，不用其他操作或者定义变量，data: {alias: query}。其中alias是自己传递到action的变量，由于公司使用的是struts，所以呢，自己使用模型驱动还是属性驱动，或者其他框架，自己看事哈。其他的typehead框架里面的属性可以查看我给出几个参考链接，还是挺全乎的。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本实例</title> <link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jQuery-2.1.3.min.js"></script>
<script src="js/typeahead.jquery.min.js"></script>
<script src="js/bloodhound.min.js"></script>
<script src="js/typeahead.bundle.min.js"></script>
<!-- <script src="js/bootstrap3-typeahead.js"></script>
<script src="js/bootstrap3-typeahead.min.js"></script> --> <!-- 参考1 : https://segmentfault.com/a/1190000006036166
参考2 : https://blog.csdn.net/u010174173/article/details/53227583
参考3 : https://www.cnblogs.com/haogj/p/3376874.html
参考4 : https://www.cnblogs.com/shiyu404/p/6344591.html
参考5 : https://blog.csdn.net/lanxuezaipiao/article/details/48193525 --> <!-- 官网 : http://twitter.github.io/typeahead.js/ --> <script type="text/javascript">
// 开始1 -->
jQuery(function () {
/*** 1.基本示例 ***/
var provinces = ["广东省", "河北省", "海南省", "山西省", "山东省","湖北省",
"湖南省", "陕西省", "上海市", "北京市", "广西省", "西藏省",
"新疆省", "青海省", "深圳省", "香港", "澳门",
"台湾省", "南海群岛", "浙江省", "江苏省", "四川省", "重庆省",
"安徽省", "河南省", "内蒙古省", "辽宁省", "吉林省", "黑龙江省",
"海南省", "甘肃省"]; var substringMatcher = function (strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
matches = [];//定义字符串数组
substrRegex = new RegExp(q, 'i');
//用正则表达式来确定哪些字符串包含子串的'q'
$.each(strs, function (i, str) {
//遍历字符串池中的任何字符串
if (substrRegex.test(str)) {
matches.push({ value: str });
}
//包含子串的'q',将它添加到'match'
});
cb(matches);
};
}; $('#basic-example .typeahead').typeahead({
highlight: true,
minLength:
},
{
name: 'provinces',
displayKey: 'value',
source: substringMatcher(provinces)
}); });
// 结束1 --> // 开始2 -->
/*** 2.Ajax数据预读示例 ***/
//远程数据源
jQuery(function () {
var prefetch_provinces = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
// 预获取并缓存
prefetch: 'json/provinces.json'
}); //console.log(prefetch_provinces);
//console.log(prefetch_provinces.index.datums); prefetch_provinces.initialize(); $('#ajax-prefetch-example .typeahead').typeahead({
hint: true,
highlight: true,
minLength: ,
}
, {
name: 'provinces',
displayKey: 'value',
source: prefetch_provinces.ttAdapter(),
});
});
// 结束2 --> // 开始3 -->
/*** 3.Ajax及时获取数据示例 ***/
//远程数据源
jQuery(function () {
var remote_cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('CityName'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
// 在文本框输入字符时才发起请求
remote: 'json/GetCities?q=%QUERY',
wildcard: '%QUERY',
}); //console.log(remote_cities);
//console.log(remote_cities.index.datums); remote_cities.initialize(); $('#ajax-remote-example .typeahead').typeahead({
hint: true,
highlight: true,
minLength: ,
},
{
name: 'cities',
displayKey: 'CityName',
source: remote_cities.ttAdapter(),
// limit: 10,
});
});
// 结束3 --> // 开始4 -->
//jQuery(function () {
$(function(){
var _t = this;
var states = new Array();//新建数组
var obj = {}; //新建对象
$('#ajax-example .typeahead').typeahead(
{
hint: true,
highlight: true,
//minLength: 1,
items:,//最多显示的下拉列表内容
},{
source: function (query, process, sync, async) {
//source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，
//第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。
//如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，
//你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。
$.ajax({
url: 'tenantDBAction!findByName.action',//模拟的本地数据
type: 'post', //请求类型
data: {alias: query}, //输入框的内容。query是输入框的内容，参考案例四。
dataType: 'json',
async: false,
success: function (data) {
var arr = []; //定义变量的作用，由于你输入一个字母都开始请求后台，所以这里定义变量用于states = arr;赋值，避免出现数组里面存放多次返回结果。你可能会遇到。
console.log(data);//打印输出
if(data != null && data != "null"){//判断是否为空，避免浏览器控制台报错
var result = data.result;
//console.log(result);
if(result != null && result.length > ){//判断是否为空 且长度大于0，避免浏览器控制台报错
$.each(result, function (i, item) {
//console.log(i + "," + item);
arr.push(item.alias);//这里可以进行处理，我简单的放进数组了，然后只是做到了自动补全功能呢，你可以根据业务需求来搞。
});
states = arr;
}
console.log(states);
}
return process(states);//使用process来进行回显处理
//sync(states);
}
});
},
limit:
});
});
//});
//结束4 --> </script>
</head>
<body> <!-- 案例一、开始1 -->
<div class="example" align="center">
<h2>Basic基本示例</h2>
<div id="basic-example">
<input class="typeahead" type="text" placeholder="请输入省份">
</div>
</div>
<!-- 结束1 --> <br />
<br />
<br /> <!-- 案例二、开始2 -->
<div class="example" align="center">
<h2>Prefetch数据预读示例</h2>
<div id="ajax-prefetch-example">
<input class="typeahead" type="text" placeholder="请输入省份">
</div>
</div>
<!-- 结束2 --> <br />
<br />
<br /> <!-- 案例三、开始3 -->
<div class="example" align="center">
<h2>Remote及时获取数据示例</h2>
<div id="ajax-remote-example">
<input class="typeahead" type="text" placeholder="请输入城市">
</div>
</div>
<!-- 结束3 --> <br />
<br />
<br /> <!-- 案例四、开始4 -->
<div class="example" align="center">
<h2>Ajax获取后台数据</h2>
<div id="ajax-example">
<input class="typeahead" autocomplete="off" type="text" placeholder="请输入城市">
</div>
</div>
<!-- 结束4 --> </body>
</html>
效果如下所示：
3、重点说下，案例四，使用ajax处理获取到数据库的数据。
struts的xml配置如下所示：
<action name="xxxAction" class="com.xxx.xxx.xxx.action.xxxAction">
<result name="dataMap" type="json">
<param name="root">dataMap</param>
</result>
</action> struts的action处理如下所示： private String alias;
private Map<String, Object> dataMap = new HashMap<String, Object>();
public String getAlias() {
return alias;
}
public void setAlias(String alias) {
this.alias = alias;
}
public Map<String, Object> getDataMap() {
return dataMap;
} public void setDataMap(Map<String, Object> dataMap) {
this.dataMap = dataMap;
} public String findByName() throws ParseException {
List<xxx实体类> name = tenantDbMgmtService.findByName(alias);
dataMap.put("result", name);
return "dataMap";
} sql的配置文件如下所示：
可以根据自己业务需求，看看是全模糊，还是左模糊，还是右模糊查询哦。 <select id="findByName" parameterClass="java.util.Map" resultMap="xxxResult">
<![CDATA[
SELECT * FROM xxx数据表名称 WHERE alias like concat('%',#alias#,'%')
]]>
</select>
待续......
bootstrap-typeahead 自动补全简单的使用教程的更多相关文章
- bootstrap - typeahead自动补全插件
$('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- 【Bootstrap】 typeahead自动补全
typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...
- typeahead自动补全插件的limit参数问题
遇到的问题很诡异: 后台返回的数据都正确就是显示不正常(有时多有时少),后来发现是typeahead的问题,在1.11版本之后,limit参数从option选项里改到了setdata选项: limit ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- jquery input 搜索自动补全、typeahead.js
最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...
- angular-ui-bootstrap typeahead 智能提示 自动补全 获取焦点不触发问题的解决
项目中有一处使用了angular-ui-bootstrap中的typeahead来实现输入框智能提示语自动化补全的功能,存在一个bug, 即输入文字后,当再次点击文本框,其获取焦点后并不会触发智能提示 ...
- 自动补全Typeahead
采用 Typeahead (Bootstrap-3-Typeahead-master) <script type="text/javascript" src="/j ...
- bootstrap3-typeahead 自动补全
很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://gith ...
随机推荐
- python在windows（双版本）及linux环境下安装
python下载 下载地址:https://www.python.org/downloads/ 可以下载需要的版本,这里选择2.7.12和3.6.2 下面第一个是linux版本,第二个是windows ...
- 运行adb命令报错adb server version (31) doesn't match this client (39); killing...
执行adb devices 报错 原因分析: 这个是socket 的端口被占用了,我这里是因为360手机助手占用了这个端口,所以其他的就不能够用了. 解决办法: 卸载了360的手机助手就可以了 首先 ...
- jmeter+maven+jenkins自动化接口测试（下）
maven+jmeter已经写好了,可以通过maven来执行jmeter的接口测试脚本,怎样实现定时执行测试并发送报告邮件就需要通过jenkins了(jmeter或者testng也可以结合不同的邮件j ...
- Error:java: 无效的目标发行版: 1.８
出现问题: Error:java: 无效的目标发行版: 1.8 解决方法: file-setting--
- java基础-容器-Set
Set:set不存重复元素,如果是使用set存储java预定义的Integer,String等类型会很简单,如果是存储自定义类型的数据类型,就必须要重新定义equals()方法以确保set中保存的对象 ...
- Mac 上 Apache Apollo 的安装与运行，和官方下载文件中 Python 实例的演示
前不久我在 Mac 上成功安装了 mosquitto,这次我又试了试安装另一个热门的 broker —— Apache Apollo.对在 Mac 上安装 mosquitto 感兴趣的可以点击查看我的 ...
- wpf编写一个简单的PDF转换的程序
wpf 调用Spire.Pdf将PDF文件转换为其他文件模式 首先在Nuget里下载该第三方包Spire.Pdf. 然后可以编写程序 //这里我调用的是解析成流模式,这是因为我要使用ProgressB ...
- 【Unity游戏开发】tolua之wrap文件的原理与使用
本文内容转载自:https://www.cnblogs.com/blueberryzzz/p/9672342.html .非常感谢原作者慷慨地授权转载,比心!@blueberryzzz 是位大神,欢迎 ...
- [Android] Android 手机下 仿 今日头条 新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个 仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...
- 【转】Unity四元数和向量相乘作用及其运算规则
作用:四元数和向量相乘表示这个向量按照这个四元数进行旋转之后得到的新的向量. 比如:向量vector3(0,0,10),绕着Y轴旋转90度,得到新的向量是vector3(10,0,0). 在unity ...