typeahead.js_jquery input 搜索自动补全jQuery插件
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法，用于完成自动补全功能，能够完成绝大部分表单自动补全的需求。
使用方法
在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。
html结构
该jquery自动补全插件可以和bootstrap集成使用，基本的HTML结构如下：
初始化插件
初始化该jquery自动补全插件有两种方法：
方法一：通过$.typeahead()来初始化。（建议使用该方法）
方法二：通过唯一的input选择器来创建一个jQuery对象，然后在该对象上使用.typeahead()方法。
<link rel="stylesheet" type="text/css" href="css/jquery.typeahead.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script><form>
<div class="typeahead__container">
<div class="typeahead__field">
<span class="typeahead__query">
<input class="js-typeahead"
name="q"
type="search"
autocomplete="off">
</span>
<span class="typeahead__button">
<button type="submit">
<span class="typeahead__search-icon"></span>
</button>
</span>
</div>
</div>
</form>$.typeahead({
input: ".js-typeahead",
order: "asc",
source: {
groupName: {
// Ajax Request
ajax: {
url: "..."
}
}
},
callback: {
onClickBefore: function () { ... }
}
});$('.js-typeahead').typeahead({
order: "asc",
source: {
groupName: {
// Array of Objects / Strings
data: [ {...}, {...} ]
}
},
callback: {
onInit: function () { ... }
}
});本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
