您的位置：首页 > Web前端 > BootStrap

Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍

2017-06-09 15:41 375 查看

最近在做项目中，遇到了这样一个业务需求，文本框中输入一个汉字或者字母就能通过ajax向后台数据库发送请求，然后把匹配的数据获取到下拉列表中可进行选择；

效果如下：

;

网上关于这个有很多说法和版本，但是我自认为解释都不够详细，下面我来介绍一下：（本次开发：spring+mvc）

step1：下载组件，进入jQuery组件库，然后搜索 bootstrap_typeahead直接下载；

step2：把其中的bootstrap.css和bootstrap-typeahead.js以及jquery-1.8.3.min.js导入项目对应的目录下；

step3：如果想先模拟数据的话，你可以在jsp页面上先模拟数据来判断组件是否合适：

1》数据源模拟：

<!DOCTYPE html>

<html>

<head>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div style="margin: 50px 50px">

<label for="product_search">Product Search: </label>

<input id="product_search" type="text" data-provide="typeahead">

</div>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/bootstrap-typeahead.js"></script>

<script>

$('#product_search').typeahead({

source: [

{ id: 1, full_name: 'Toronto', first_two_letters: 'To' },

{ id: 2, full_name: 'Montreal', first_two_letters: 'Mo' },

{ id: 3, full_name: 'New York', first_two_letters: 'Ne' },

{ id: 4, full_name: 'Buffalo', first_two_letters: 'Bu' },

{ id: 5, full_name: 'Boston', first_two_letters: 'Bo' },

{ id: 6, full_name: 'Columbus', first_two_letters: 'Co' },

{ id: 7, full_name: 'Dallas', first_two_letters: 'Da' },

{ id: 8, full_name: 'Vancouver', first_two_letters: 'Va' },

{ id: 9, full_name: 'Seattle', first_two_letters: 'Se' },

{ id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo' }

],

display: 'full_name'

});

</script>

</body>

</html>

2》直接发送ajax请求从数据源获取数据：

<script>

$("#DItr1td2Select").typeahead({
ajax: {
url: "${ctx}/referral/getPrimaryDiagnosis",
timeout: 500,
displayField: "result",
triggerLength: 1,
dataType: 'JSON',
method: "get",
loadingClass: "loading-circle",
preDispatch: function (query) {
return {
query: query, //查询条件
limit: 5, //一次只查询5条
}
},

/* preProcess: function(data) { // 这个方法非常重要！

// 同时应当注意！

//在這里轉換為json格式，或者在controller中轉換為json格式

return data; //非常重要

}, */

itemSelected:function(item, value, text) {
alert(item);//object 对象
item.valueOf().substr(0, 3);
alert(item.toString().substr(0, 3)); //选中的名称s
return item.valueOf().substr(0, 3);

}

},
display:'result',
val:'common_fields_id',
items:5,
/* itemSelected:function(item, value, text) {
alert(item);//object 对象
item.valueOf().substr(0, 3);
alert(text.toString().substr(0, 3)); //选中的名称s
return item.valueOf().substr(0, 3);

}, */
uploadData:function(item){//什么都可以通过。不许要做匹配验证则写成如下这种方案

return item;
}
});

</script>

div标签不变；

当时我写到这里的时候，一直获取不了数据：现在我详细介绍发送请求时的几个属性的意思：

url：请求的地址；

timeout：延迟加载，单位是ms；

displayField：数据源返回的结果决定显示的字段

triggerLength：文本框中当输入几个汉字时触发请求

dataType：返回的数据类型

method：请求的方式

loadingClass: "loading-circle", 说实话这个我也没有整明白，但是就这样写着就好

preDispatch: function
(query) { //发送请求之间执行的方法，
       return {
       query:
query, //查询条件，传到后台的值就是query
       limit: 5, //一次只查询5条
       }
       },

preProcess:
function(data) { // 服务器响应成功后执行的方法，数据全部在data中
  // 同时应当注意！
  //在這里轉換為json格式，或者在controller中轉換為json格式
return data; //如果controller已经转换为json格式，这里就直接返回data，如果之前没有转换为json格式，这里就写为$.parseJSON(data);
}, */

display:'result',//这个也是展示的字段名称，与上面的displayFIledName同名，这个是必须得填的

val:'common_fields_id',//字段值//可以不填
  items:5,//结果的最大显示条数//可以不填

其实写到这里一个完整的bootstrap-typeahead的ajax已经搞定了，至于下面的

itemSelected:function(item,
value, text) {

alert(item);//object 对象

item.valueOf().substr(0, 3);

alert(item.toString().substr(0, 3)); //选中的名称s

return item.valueOf().substr(0, 3);



}

},

display:'result',

val:'common_fields_id',

items:5,

/* itemSelected:function(item, value, text) {

alert(item);//object 对象

item.valueOf().substr(0, 3);

alert(text.toString().substr(0, 3)); //选中的名称s

return item.valueOf().substr(0, 3);



}, */
uploadData:function(item){//什么都可以通过。不许要做匹配验证则写成如下这种方案

return item;
}

});

都是些不是必须操作的东西，大家如果有兴趣的话自己可以研究，然后研究通了在我这里留言，我也学习学习；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax bootstrap-typeahead jquery

相关文章推荐

新的分享

章节导航