之前做的自动补全是用的jquery的autocomplete，今天发现一个很酷的自动补全插件！
很酷的一个自动补全插件
http://twitter.github.io/typeahead.js
在bootstrap中使用typeahead插件，完成自动补全
数据源：
Local：数组
prefectch：json
remote等方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- 需要额外的css样式覆盖bootstrap的样式，让dropdown列表好看些 -->
<link href="typeahead.css" rel="stylesheet">
<!-- typeahead需要1.9以上的jquery -->
<script src="jquery-10.0.2.js"></script>
<!-- typeahead -->
<script src="typeahead.min.js"></script>
<style>
body {
padding: 50px; /*边距*/
}
input{
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function(){
//初始化typeahead
$('input.typeahead').typeahead({
name: 'countries',/*用来区分数据源，数据源可能有多个*/
local: ['Andorra', 'United Arab Emirates', 'Afghanistan', 'Anguilla'], /*本地数据*/
limit: 10,
header: 'list of country:'/*结果集的标题*/
});
});
</script>
</head>
<body>
<div style="text-align:left">
<h3>Countries</h3>
<p>Prefetches data, stores it in localStorage, and searches it on the client</p>
<hr>
</div>
<div class="well well-lg">
<!-- 自动补全框 -->
<input type="text" class="typeahead" placeholder="country">
</div>
</body>
</html>
相关推荐
Bootstrap-Typeahead是一款基于Bootstrap的Typeahead自动补全插件。该插件用来完成输入框的自动完成、模糊搜索和建议提示的功能，同时支持bootstrap3和bootstrap4。
jQuery百度搜索自动补全插件是一款高级的自动补全jQuery插件typeahead.js。
在bootstrap中使用typeahead插件，完成自动补全 相关的文档：https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源： Local：数组 prefectch：json remote等方式 ——————...
这个The Typeahead 插件来自Twitter的Bootstrap 2，支持 Bootstrap 3 和Bootstrap 4。
本文给大家介绍BootStrap Typeahead自动补全插件的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下
这就是贴代码的坏处之一：搜索框快被网友玩儿坏了！！！...而且好像还在玩儿，随他们去吧，只要...接触到的自动补全插件主要有两个：autocomplete和typeahead。本站使用的是typeahead. jQueryUI-Autocomplete 自动补全插
主要介绍了使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下