typeahead.js

前几天工作比较忙没有过来写，今天趁着有点空我来跟大家一起研究一下搜索提示框联想。 先来看看百度的搜索框。非常朴素简单。作为一个搜索引擎，推荐的搜索词只是方便你用来进行 进一步的搜索。 逻辑上给我个人的感觉是10条，那么排序上应该是根据搜索率倒序的前10条记录。 这里能匹配到的数据应该很多，但是如果全部加载进来会显得很长很长，速度还会慢。 Typeahead 的使用 为了提高效率，我选择了个成熟好用的搜索提示框架，由 Twitter 出品的 Typeahead.js。 源码地址： https://github.com/twitter/typeahead.js Typeahead 需要依赖 jQuery 1.9+，我们先创建一个简单的静态页面，名为 index.html。 下载好 jQuery 和 Typeahead 的 JS。 先建个demo页面index.html，内容如下。 基本上给input绑定应该都看的很清晰，找到id=demo下的class=typeahead绑定上方法下面 的hint就是提示，主要的是source：数据源。 var suggestions = ['test1', 'test2', 'test3', 'ceshi1', 'ceshi2', 'ceshi3']; 我这里是写死的，用post可以去后台请求数据源。 那么我来看看效果。 我因为做测试没有加样式

1.简介 BootstrapTagsInput是一个基于jQuery和Bootstrap.css的用于管理标签的插件。 官网在这： 官网 这个官网呢，怎么说呢，比较简洁。示例聊胜于无。 最简单的用法就是在引入jquery,和Bootstrap的前提下，在input标签中添加 data-role="tagsinput"，即可初始化。 <input type="text" value="" data-role="tagsinput" /> 原因在于下方代码，代码最后一部分，写了是如何初始化的。 /** * Initialize tagsinput behaviour on inputs and selects which have * data-role=tagsinput */ $(function() { $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput(); }); 还有一个通过 select标签初始化的方式。并在标签加上 multiple 属性，在通过$("select").tagsinput('items')，获取值时，返回的是一个数组，而不是逗号分隔的字符串了。 <select multiple data-role="tagsinput"> <option