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

 Bootstrap   高蒙   阅读(5450)   评论(0)   2016-07-11 14:28:00    bootstrap输入提示 bootstrap-typeahead.js 


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

html前台模板:

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-typeahead.min.js"></script>
<input name='title' class="form-control" id="search"  autocomplete="off" data-provide="typeahead">
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条
        });
    });
</script>

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;

效果图如下:

1.png


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


输入提示bootstrap-typeahead.js

案例

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

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

需要设置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)

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




相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客