手机站jQuery自动完成插件autoComplete.js

AutoComplete 是一个 jQuery Mobile 的插件，用于实现在 jQuery Mobile 中的搜索框中提供自动完成的功能。

autoComplete.js

自动完成是一个jQuery插件，移动它允许开发人员能够自动完成搜索框添加到您的项目。

根据该博客条目雷蒙德·卡姆登（的@cfjedimaster）。

例

查看一个简单的自动完成功能的演示

快速开始

克隆git的回购- 混帐克隆https://github.com/commadelimited/autoComplete.js.git -或者下载

用法和文档

$("#searchField").autocomplete({
    method: 'GET', // allows POST as well
    icon: 'arrow-r', // option to specify icon
    target: $('#suggestions'), // the listview to receive results
    source: 'data.cfcmethod=search&returnformat=json', // URL return JSON data
    callback: fn(){}, // optional callback function fires upon result selection
    link: 'target.htmlterm=', // link to be attached to each result
    minLength: 0 // minimum length of search string
    transition: 'fade',// page transition, default is fade
    matchFromStart: true, // search from start, or anywhere in the string
    loadingHtml : '<li data-icon="none"><a href="#">Searching...</a></li>', // HTML to display when searching remotely
    interval: 0, // The minimum delay in milliseconds between server calls when using a remote "source"
    builder : null, // optional callback to build HTML for autocomplete
    labelHTML: fn(){}, // optional callback function when formatting the display value of list items
    onNoResults: fn(), // optional callback function when no results were matched
    onLoading: fn(), // optional callback function called just prior to ajax call
    onLoadingFinished: fn(), // optional callback function called just after ajax call has completed
    dataHandler : fn(), // optional function to convert the received JSON data to the format described below
    klass: 'tinted', // optional class name for listview's <li> tag
    forceFirstChoiceOnEnterKey : true, // force the first choice in the list when Enter key is hit
    transformResponse: fn() //transform your data into useable data to create autoComplete items list, return json obect with
                // label and value attribute e.g. {label : "text to show", value: "hidden value"}
});

自动完成可以访问本地阵列或远程数据源。

简单或复杂的：AutoComplete.js可以以两种方式之一读取数据。简单的数据应该按以下格式源返回：

[
    "Maine",
    "Maryland",
    "Massachusetts"
]

导致生成的代码看起来像这样：<a href="target.htmlterm=Maine">缅因州</A>

复杂的数据允许开发人员指定哪个值去哪里。此选项要求数据被返回对象的数组：

[
    {
        value: "22",
        label: "Maine"
    },
    {
        value: "23",
        label: "Maryland"
    },
    {
        value: "24",
        label: "Massachusetts"
    }
]

导致生成的代码看起来像这样：<a href="target.htmlterm=22">缅因州</A>

数据autocomplete属性

在1.4.3新的“数据自动完成”属性添加到包含各列表项的锚标记。这个属性包含的每个项目的阵列中的序列版本。请参阅“回调plus.html”的用法。

回电话

当使用可选的回调函数自动完成功能只会执行回调中发现的代码。点击事件对象被传递到回调函数的用于访问包含在选择的信息。这里有一个用例：

$("#searchField").autocomplete("update", {
    source: [ "foo", "bar", "baz" ],
    minLength: 3,
    callback: function(e) {
        var $a = $(e.currentTarget); // access the selected item
        $('#searchField').val($a.text()); // place the value of the selection into the search box
        $("#searchField").autocomplete('clear'); // clear the listview
    }
});

实用方法

更新 - 含自动完成设置，更新对象

这种方法允许插件被初始化后，你为一个元素更新自动完成设置。

$("#searchField").autocomplete("update", {
    source: [ "foo", "bar", "baz" ],
    minLength: 3
});

明确

这种方法将清除“目标”列表视图。有用的，如果你需要清空应对其他事件的列表。

$("#searchField").autocomplete("clear");

破坏

此方法将清理存储元素上的任何绑定事件或数据。

$("#searchField").autocomplete("destroy");

活动

targetUpdated.autocomplete

事件每个目标列表视图更新时被解雇。一个潜在用途是绑定到这个事件，并滚动到页面，使补全列表是不完全隐藏在软/虚拟键盘背后的顶部。

$("#searchField").autocomplete({
    target: $('#autocomplete'),
    source: autocompletes
}).bind("targetUpdated.autocomplete", function(e) {
    $.mobile.silentScroll($(e.currentTarget).offset().top);
});

targetCleared.autocomplete

时触发的事件目标的ListView被清空（没有完工显示）。

特约

邀请您贡献代码，并建议该项目。多多益善。

项目信息

来源：https://github.com/commadelimited/autoComplete.js
微博：http://twitter.com/commadelimited
微博：http://twitter.com/cfjedimaster

所需的第三方库：

jQuery的：MIT / GPL许可证
jQuery Mobile的：MIT / GPL许可证

源码搜藏网

首页 > 开发教程 > js/jQuery教程 >