bootstrap3-typeahead 文本自动补全填充

落日映苍穹つ 2022-05-31 03:45 664阅读 0赞

由于项目需要，需要实现文本的自动填充功能，多方查资料总结如下：

bootstrap-typeahead 在用户填写表单时，为用户提供提示或数据。

Bootstrap 允许您创建外观好看的 Typeahead，而且，它易于扩展，您可以不需要太大的改动就可以加强它的功能。

下面来介绍bootstrap3-typpeahead的使用：

1、必须引用两个 JavaScript 文件 jquery.js 和 bootstrap3-typeahead.js

bootstrap3-typeahead.js的下载地址：

官网：https://github.com/bassjobsen/Bootstrap-3-Typeahead/

百度网盘：https://pan.baidu.com/s/1pNsUTuj

2、通过JavaScript

调用$('.typeahead').typeahead()

3、typeahead()详解

(此处取自：http://www.cnblogs.com/shiyu404/p/6344591.html)

参考官方README和其他一些博客的资料，可以了解typeahead函数可以接受的一些参数，这些参数可以通过指定标签属性来传递，

也可以直接在JavaScript中给出。对于标签属性传递参数来说，需要在参数前加上data-，例如data-source="".

下表为官方README文档中参数表格的翻译版本：

<table style="margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; border-color:rgb(0,0,0); word-break:break-word; color:rgb(0,0,0); font-family:&quot;Helvetica Neue&quot;,Helvetica,Verdana,Arial,sans-serif; font-size:14px; height:533px; width:958px; background-color:rgb(218,255,255)"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Name</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Type</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Default</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Description</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> source</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> array, function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> []</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 用来查询的数据源。可以是数组或字符串，一个带有name属性的JSON对象的数组集合，或者一个函数。函数可以接受两个参数，query代表输入框中你的输入值（即查询值）,process回调函数。The function may be used synchronously by returning the data source directly or asynchronously via the&nbsp;<code style="margin:0px; padding:0px">process</code>&nbsp;callback's single argument. </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> items</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> number</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 8</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 下拉选项中出现条目的最大数量。也可以设置为“all”</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> minLength</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> number</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 1</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 出发下拉提示的最小长度字符串。可以设置为0，即使没有填写任何内容，也会出现提示。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> showHintOnFocus</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> boolean or "all"</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> false</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 当输入框获得焦点时立刻显示提示。如果设置为true，显示所有匹配项。如果设置为“all”，显示所有提示，并不会按照当前文本过滤。当你需要一个组合框（Combo Box，由文本框和下拉框组成）功能时，可以考虑这个。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> scrollHeight</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> number, function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 0</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> matcher</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> case insensitive</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 该函数用来确定匹配条目的规则。接受一个参数，item用于测试查询字符串是否匹配。通过当前查询字符串this.query。如果相匹配则返回true</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> sorter</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> exact match, case sensitive, case insensitive</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 该函数用来对结果进行排序。接受一个参数items并且具有typeahead实例的作用域，通过this.query得到当前查询。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> updater</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> returns selected item</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 该函数用来返回选中的条目。接受一个item参数并且具有typeahead实例的作用域。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> highlighter</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> highlights all default matches</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 用来高亮自动补全的结果。接受一个item参数并且拥有typeahead实例的作用域。应该返回html</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> displayText</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> item.name || item</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 用来得到数据源的条目的文本表示。接受一个item参数并且拥有typeahead实例的作用域。应该返回一个字符串。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> autoSelect</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> boolean</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> true</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 允许你决定是否自动选择第一个建议。关闭它意味着如果没有选择任何内容（或Enter或Tab），输入将不会清空。</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> afterSelect</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> function</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> $.noop()</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 选择一个条目后的回调函数。It gets the current active item in parameter if any.</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> delay</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> integer</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 0</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 在查找之间添加延迟</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> appendTo</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> jQuery element</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> null</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 默认情况下，菜单将会出现在输入元素的之后。使用这个选项来添加菜单到其他div。如果你想使用bootstrap的dropup或者dropdown-menu-right classes，就不要使用它</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> fitToElement</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> boolean</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> false</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 如果你希望菜单的大小与其所链接的输入的大小相同，置为true</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> addItem</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> JSON object</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> false</td> 
 <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 在list的最后添加一个条目，例如“New Entry”。这可能被用到，例如当一个条目在数据集中没有被</td> 
 </tr> 
 </tbody> 
</table>

4、 示例代码1-ajax简单实例

### ajax动态查询 ###

![复制代码][copycode.gif]

$("#search-platform").typeahead({
            source: function (query, process) {
                return $.ajax({
                    url: '/domain/xxxx',
                    type: 'post',
                    data: {name: query},
                    success: function (result) {
                        return process(result);
                    },
                });
            }
    });

![复制代码][copycode.gif]

这里我们只使用了一个source选项，指定一下数据源，通过上表我们了解到source可以是一个带有两个参数的函数，

其两个参数分别为query和process，query是当前输入框中所输入的内容，process是一个回调函数，

它用来将我们得到的结果转换为typeahead组件可以识别的数据。

结合上面一段代码，我们返回的内容是通过ajax请求得到的结果，但是这个结果经过了process进行处理。

### ajax动态查询，定制显示内容 ###

上面的需求很简单，但是有的时候要考虑更加完善的情况，比方说现在有一个查询框，是用来查询学生姓名的，考虑问题：

![870182-20170123164748581-1159941383.png][]

#### updater ####

![复制代码][copycode.gif]

/**
             * 在选中数据后的操作，这里的返回值代表了输入框的值
             *
             * @param obj
             * @return 选中后，最终输入框里的值
             */
            updater: function (obj) {
                var item = JSON.parse(obj);
                return item.name;
            }

![复制代码][copycode.gif]

最终输入框中我们只让他回填name。

5、实例代码2-本地数据简单示例

html:

/\* autocomplete 避免浏览器的自动提示对下拉选项的覆盖操作 \*/

<input id="local\_data" autocomplete="off" data\-provide="typeahead" type="text" class="input-sm form-control" placeholder="请输入(本地Array数据)" />

Js：

1.  var localArrayData = \['beijing', 'shanghai', 'guangzhou', 'sz', 'hangzhou', 'ningbo'\];
2.  function parseLocalArrayData() \{ 
3.              $("\#local\_data").typeahead(\{ 
4.                  source: localArrayData,//数据源
5.                  items: 8,//最多显示个数
6.                  updater: function (item) \{ 
7.                      return item;//这里一定要return，否则选中不显示，外加调用display的时候null reference错误。
8.                  \},
9.                  displayText: function (item) \{ 
10.                     return "选：" + item;//返回字符串
11.                 \},
12.                 afterSelect: function (item) \{ 
13.                     //选择项之后的事件 ，item是当前选中的。
14.                 \},
15.                 delay: 500//延迟时间
16.             \});
17.             $("\#look\_up\_array").click(function () \{ 
18.                 $("\#local\_data").typeahead("lookup", '选');
19.             \});
20.             $("\#get\_value\_array").click(function () \{ 
21.                 var val = $("\#local\_data").typeahead("getActive");
22.                 console.log(val);
23.             \});
24.         \}

6、示例代码3-本地数据选中后返回数据id示例

html:

<input id="local\_object\_data" autocomplete="off" data\-provide="typeahead" type="text" class="input-sm form-control"placeholder="请输入（本地Object数据）" />

Js:

1.  var localObjectData = \[\{ id: 1, name: 'beijing' \}, \{ id: 2, name: 'shanghai' \}, \{ id: 3, name: 'guangzhou' \}, \{ id: 4,name: 'sz' \}\];
2.  var objMap = \{\};
3.  function parseLocalObjectData() \{ 
4.              //typeahead只能处理简单的列表，所以要构造一个array string。名称对应的id放到objMap里面；
5.              $("\#local\_object\_data").typeahead(\{ 
6.                  source: function (query, process) \{ 
7.                      var names = \[\];
8.                      $.each(localObjectData, function (index, ele) \{ 
9.                          objMap\[ele.name\] = ele.id;
10.                         names.push(ele.name);
11.                     \});
12.                     process(names);//调用处理函数，格式化
13.                 \},
14.                 afterSelect: function (item) \{ //选中一条数据后的回调函数，此处可以向隐藏域赋值数据id
15.                     console.log(objMap\[item\]);//取出选中项的值
16.    $("id").val(objMap\[item\]);  
    
17.                 \}
18.             \});
19.         \}

7、示例代码7-异步加载数据

异步调用服务器数据，delay参数就很有用了

html:

js:

![SouthEast][]

[copycode.gif]: /images/20220531/0a128ce0fb2b4ed0898e38e2055df1a6.png
[870182-20170123164748581-1159941383.png]: /images/20220531/ff4e1f22dd1d489183b4f0597188fafa.png
[SouthEast]: /images/20220531/7df4b94f2ffa4e0a9915febea29c17ce.png