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

ゞ浴缸里的玫瑰 2022-06-14 04:20 310阅读 0赞

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

效果如下：

![Image 1][];

网上关于这个有很多说法和版本，但是我自认为解释都不够详细，下面我来介绍一下：（本次开发：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请求从数据源获取数据：

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;  
\}   
   \});

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

[Image 1]: