typeahead.js_jquery input 搜索自动补全jQuery插件

摘要：jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法，用于完成自动补全功能，能够完成绝大部分表单自动补全的需求。

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法，用于完成自动补全功能，能够完成绝大部分表单自动补全的需求。使用方法在页面中引入jquery、jquery.typeahead.min.js和jquery.typeahead.min.css文件。

<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>

HTML结构该jquery自动补全插件可以和bootstrap集成使用，基本的HTML结构如下：

<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>

初始化插件初始化该jquery自动补全插件有两种方法：方法一：通过$.typeahead()来初始化。（建议使用该方法）

$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    source: {
        groupName: {
            // Ajax Request
            ajax: {
                url: "..."
            }
        }
    },
    callback: {
        onClickBefore: function () { ... }
    }
});

方法二：通过唯一的input选择器来创建一个jQuery对象，然后在该对象上使用.typeahead()方法。

$('.js-typeahead').typeahead({
    order: "asc",
    source: {
        groupName: {
            // Array of Objects / Strings
            data: [ {...}, {...} ]
        }
    },
    callback: {
        onInit: function () { ... }
    }
});

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_789