注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery仿谷歌下拉自动完成输入插件Typeahead

输入 fishcity 3276浏览

jquery自动完成输入Typeahead

Typeahead 是一款仿谷歌下拉自动完成输入的jQuery插件,提供类似于谷歌搜索的预览搜索自动完成输入功能,同进内置了多个参数便于深度定制。这是一个简单的前端库,给网站搜索输入添加一个更好的用户体验!

jquery实例:typeahead使用方法

引入核心文件

<html>
<head>
    ...
    <!-- Optional CSS -->
    <link rel="stylesheet" href="/vendor/runningCoder/js/jquery.typeahead.css">
 
    <!-- Required JavaScript -->
    <script src="/vendor/jquery/js/jquery-2.1.0.min.js"></script>
    <script src="/vendor/runningCoder/js/jquery.typeahead.js"></script>
 
    <!-- Optional - Compression -->
    <script src="/vendor/lzstring/js/lz-string-1.3.3-min.js"></script>
    ...
</head>

初始化,这里有两个方法,一个是jquery选择器,一个直接用$.typeahead()方法中的input参数

$('#myinput').typeahead(
    source: {
        data: [ ... ]
    }
    ,
    callback: {
        onInit: function () { ... }
    }
});

$.typeahead({
    input: "#myInput",
    order: "asc"
    source: {
        url: [ ... ]
    },
    callback: {
        onClick: function () { ... }
    }
});

html

<form id="" name="" action="">
    <div class="typeahead-container">
        <div class="typeahead-field">
 
            <span class="typeahead-query">
                <input id="" name="" type="search">
            </span>
            <span class="typeahead-button">
                <button type="submit">
                    ...
                </button>
            </span>
 
        </div>
    </div>
</form>

参数配置

实例扩展默认值配置。Typeahead使用对象preventExtensions和_supported列表选项来防止对象接收不受支持的参数。

/**
 * @private
 * Default options
 */
var _options = {
    input: null,
    minLength: 2,
    maxItem: 8,
    dynamic: false,
    delay: 300,
    order: null,
    offset: false,
    hint: false,
    accent: false,
    highlight: true,
    list: false,
    group: false,
    groupMaxItem: false,
    filter: false,
    backdrop: false,
    cache: false,
    ttl: 3600000,
    compression: false,
    selector: {
        container: "typeahead-container",
        group: "typeahead-group",
        result: "typeahead-result",
        list: "typeahead-list",
        backdrop: "typeahead-backdrop",
        display: "typeahead-display",
        query: "typeahead-query",
        filter: "typeahead-filter",
        filterButton: "typeahead-filter-button",
        filterValue: "typeahead-filter-value",
        dropdown: "typeahead-dropdown",
        button: "typeahead-button",
        hint: "typeahead-hint"
    },
    display: "display",
    template: null,
    source: null,
    callback: {
        onInit: null,
        onMouseEnter: null,
        onMouseLeave: null,
        onClick: null,
        onSubmit: null
    },
    debug: false
};

/**
 * @private
 * Limit the supported options on matching keys
 */
var _supported = {
    dynamic: [true, false],
    order: ["asc", "desc"],
    offset: [true, false],
    accent: [true, false],
    highlight: [true, false],
    cache: [true, false],
    compression: [true, false],
    debug: [true, false]
};

更多参数请参考实例中的文档。

转载请注明:jQ酷 » jQuery仿谷歌下拉自动完成输入插件Typeahead

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。