jquery 制动完成插件

来源:互联网 发布:网络防静电地板 编辑:程序博客网 时间:2024/04/27 18:00
Autocomplete - a jQuery 插件

用法:(Usage)
====
$("selector").autocomplete(url [, options]);

演示(search for English bird names, type "com" for example):
===========================
http://www.dyve.net/jquery?autocomplete

提示:
====
确保“selector” 是唯一的。“selector”是需要自动完成的input标签ID。

例子:
=====
$("#input_box").autocomplete("my_autocomplete.php");

上面的例子,ID是input_box 的HTML标签是已存在的。当用户输入一个“foo"时autocompleter 程序通过AJAX以GET方式参数是q,
请求my_autocomplete.php, 即:?q=foo。


my_autocomplete.php 输出(这里只是简单的例子):
<?php
echo $_GET['q'];//得到input里的值
echo '
foo
fool
foot
footloose
foo fighters
food fight
';
?>


高级配置:
==========

You can pass advanced options as a JavaScript object, notation { name:value, ..., name: value }
Example: $("#input_box").autocomplete("my_autocomplete_backend.php", { minChars:3});

参数:
minChar(默认是1) :
    配置输入几个单词后,开始制动完成。 例如: {minChar:3} 输入 foo
inputClass (默认是 "ac_input")
    This class will be added to the input box.
    不知道怎什么用。
resultsClass (default value: "ac_results")
    The class for the UL that will contain the result items (result items are LI elements).
    不知道怎什么用。
loadingClass = (default value: "ac_loading")
    The class for the input box while results are being fetched from the server.
lineSeparator = (default value: "/n")
    The character that separates lines in the results from the backend.
    数据分隔符。一般我设为 lineSeparator:","  因为从数据库里查出来时是数组形式的,用implode(',', $data)格式化就可以直接使用。
cellSeparator (default value: "|")
    The character that separates cells in the results from the backend.
delay (default value: 400)
    The delay in milliseconds the autocompleter waits after a keystroke to activate itself.
    延迟时间。一般设为100
cacheLength (default value: 1)
    The number of backend query results to store in cache. If set to 1 (the current result), no caching will happen. Do not set below 1.
    缓存。 “1” 只缓存当前结果。
matchSubset (default value: 1)
    Whether or not the autocompleter can use a cache for more specific queries. This means that all matches of "foot" are a subset of all matches for "foo". Usually this is true, and using this options decreases server load and increases performance. Remember to set cacheLength to a bigger number, like 10.

matchCase (default value: 0)
    Whether or not the comparison is case sensitive. Only important only if you use caching.
   
matchContains = options.matchContains || 0;
    Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Only important if you use caching.

mustMatch (default value: 0)
    If set to 1 (true), the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. In the example at the beginning of this documentation, typing "footer" would result in an empty input box.

extraParams (default value: {})
    Extra parameters for the backend. If you were to specify { bar:4 }, the autocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input box contains "foo").

selectFirst (default value: false)
    If this is set to true, the first autocomplete value will be automatically selected on tab/return, even if it has not been handpicked by keyboard or mouse action. If there is a handpicked (highlighted) result, that result will take precedence.
    第一个匹配结果是否制动填写到input里。
selectOnly (default value: false)
    If this is set to true, and there is only one autocomplete when the user hits tab/return, it will be selected even if it has not been handpicked by keyboard or mouse action. This overrides selectFirst.

formatItem (default value: none)
    A JavaScript funcion that can provide advanced markup for an item. For each row of results, this function will be called. The returned value will be displayed inside an LI element in the results list. Autocompleter will provide 3 parameters: the results row, the position of the row in the list of results, and the number of items in the list of results. See the source code of http://www.dyve.net/jquery?autocomplete for an example.

onItemSelect (default value: none)
    A JavaScript funcion that will be called when an item is selected. The autocompleter will specify a single argument, being the LI element selected. This LI element will have an attribute "extra" that contains an array of all cells that the backend specified. See the source code of http://www.dyve.net/jquery?autocomplete for an example.


More advanced options
=====================

If you want to do more with your autocompleter, you can change some options on the fly.
The autocompleter is accessed as an attribute of the input box.

Example:
$("#input_box").autocomplete("my_autocomplete_backend.php"); // Set the autocompleter
var ac = $("#input_box")[0].autocompleter; // A handle to our autocompleter

There are currently 2 functions that can be called to influence the behaviour at run-time:

flushCache()
    This flushes the cache.

setExtraParams(obj)
    This sets the extra parameters of the autocompleter to obj (which should be a JavaScript object, see above).

It's often wise to flush the cache after calling setExtraParameters.



参考:http://plugins.jquery.com/project/suggest
 
例子代码:
怎么上传附件?
原创粉丝点击