php输入框下拉菜单,bootstrap输入提示下拉菜单(bootstrap-typeahead.js)

在使用bootstrap的时候，发现还有个好玩的功能。就是输入提示下拉菜单的功能。需要加载bootstrap-typeahead.js文件。还好，bootstrap有免费的中文cdn服务器，直接拿来用就可以了，加载的速度还是可以的。一般网站都是需要搜索联想之内的功能，通过搜索关键字，出现匹配比较高的一些文章或者标题等。那我们看看怎么去使用：

html前台模板:

script type="text/javascript">

$(document).ready(function(){

$('#search').typeahead({

source: function (query, process) {

$.ajax({

url: 'soso,php',

type: 'POST',

dataType: 'JSON',

data: query,

success: function(data) {

process(data);

}

});

},

items:5, // 设置展示多少条 默认8条

});

});

php后台程序:$a = '

["SY_20169---ID1","SY_16877---ID2","SY_72756---ID3","SY_70378---ID4","SY_21659---ID5","SY_30637---ID6","SY_30637---ID7",

"SY_00008---ID8","SY_00001---ID9","SY_00001---ID10","SY_00001---ID11","SY_00001---ID12","SY_00001---ID13"]

';

echo $a;exit;

效果图如下：

只要简单的几步就可以实现，bootstrap搜索联想和bootstrap输入提示的功能。知其然不知其所以然那是不行的。所以，我们还是看看官方手册是怎么解释的吧。

输入提示bootstrap-typeahead.js

案例

简单，易于扩展，可迅速地为表单中的文本输入框创建优雅的输入提示。

需要设置autocomplete="off"以阻止浏览器的默认提示菜单遮盖Bootstrap的输入提示下拉菜单。

调用方式

通过data属性

通过添加data属性给页面元素注册输入提示功能，就像上面的案例一样。

通过JavaScript

手动调用输入提示：$('.typeahead').typeahead()

选项

可以通过data属性或JavaScript传递参数。对于data属性，将参数名附着到data-之后，例如data-source=""。名称类型默认值描述sourcearray, function[ ]用于查询的数据源。可以是一个字符串数组或是一个函数。函数会接收到两个参数，分别是输入域中的 query值和process回调函数。函数可能会被同步调用，直接返回数据源；或者异步调用，通过process回调函数的唯一一个参数。

itemsnumber8下拉菜单中显示的最大的条目数。

minLengthnumber1触发提示所需的最小字符个数。

matcherfunctioncase insensitive该函数用于决定某个查询是否匹配某个条目。它接受唯一一个参数item，表示当前需要测试的条目。 使用this.query引用当前查询字符串。如果匹配查询，就返回一个布尔值true 。

sorterfunctionexact match,

case sensitive,

case insensitive该函数用来排序提示项。它接受唯一一个参数items，并且其变量范围在typeahead实例内。使用this.query引用当前查询字符串。

updaterfunctionreturns selected item此方法用于返回选中的条目。其接受一个参数item，并且其变量范围在typeahead实例内。

highlighterfunctionhighlights all default matches该函数用来高亮自动完成的结果。 它接受唯一一个参数item，并且变量范围在typeahead实例内。应该返回html。

方法

.typeahead(options)

为输入框初始化输入提示功能。