<a href="http://gruntjs.com" target="_blank"><img src="https://cdn.gruntjs.com/builtwith.png" alt="Built with Grunt"></a>
# jQuery Autocompleter
## Demo:
Here: [Example with Crayola colors](http://artemfitiskin.github.io/jquery-autocompleter/).
## Usage:
### Bower support:
Use ``bower install Autocompleter`` command.
### Manually:
Minimum requirements: ``jquery.autocompleter.css`` and ``jquery.autocompleter.min.js``.
#### Scripts:
```html
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>
```
#### Styles:
```html
<link rel="stylesheet" href="css/jquery.autocompleter.css">
```
#### Define your autocompleter:
```javascript
$(function () {
$('input').autocompleter({ source: 'path/to/get_data_request' });
});
```
or for local JSON source:
```javascript
var data = [
{ "value": "1", "label": "one" },
{ "value": "2", "label": "two" },
{ "value": "3", "label": "three" }
];
$(function () {
$('input').autocompleter({ source: data });
});
```
If you will not define a value in source object, label will be used as a default value in input field after select.
## Options:
Autocompleter has the following options:
| Name | Type | Description | Deafult |
| ------------- |:-------------:| -----:|-----:|
| source | str, obj | URL to the server or a local object | null |
| empty | bool | Launch if value is empty | true |
| limit | int | Number of results to be displayed | 10 |
| customClass | array | Array with custom classes for autocompleter element | [] |
| cache | bool | Save xhr data to localStorage to avoid the repetition of requests | true |
| focusOpen | bool | Launch autocompleter when input gets focus | true |
| hint | bool | Add hint to input with first matched label, correct styles should be installed | false |
| selectFirst | bool | If set to ``true``, first element in autocomplete list will be selected automatically, ignore if changeWhenSelect is on | false |
| changeWhenSelect | bool | Allows to change input value using arrow keys navigation in autocomplete list | true |
| highlightmatches | bool | This option defines ``<strong>`` tag wrap for matches in autocomplete results | false |
| ignoredKeyCode | array | Array with ignorable keycodes, by default: ``9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145`` | [] |
| customLabel | str | The name of object's property which will be used as a label | false |
| customValue | str | The name of object's property which will be used as a value | false |
| template | str | Custom template for list items. For example: ``<span>{{ label }} is {{ customPropertyFromSource }}</span>``. Template appends to ``.autocompleter-item``. | false |
| offset | str | Source response offset, for example: response.items.posts | false |
| combine | function | Returns an object which extends ajax data. Useful if you want to pass some additional server options | $.noop |
| callback | function | Select value callback function. Arguments: ``value``, ``index`` | $.noop |
## Methods:
#### Change option after plugin is defined:
```javascript
$('#input').autocompleter('option', data);
```
For example:
```javascript
$('#input').autocompleter('option', {
limit: 5,
template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});
```
#### Open list:
```javascript
$('#input').autocompleter('open');
```
#### Close list:
```javascript
$('#input').autocompleter('close');
```
#### Destroy plugin:
```javascript
$('#input').autocompleter('destroy');
```
#### Clear all cache:
```javascript
$.autocompleter('clearCache');
```
#### Set defaults:
```javascript
$.autocompleter('defaults', {
customClass: 'myClassForAutocompleter'
});
```
## Example:
Autocompleter for the first name input with caching, match highlighting and 5 results limit. Remote response depends on a gender:
#### Form:
```html
<label for="gender_male">Male</label>
<input type="radio" name="gender" value="male" id="gender_male" checked="checked" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" value="female" id="gender_female" />
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" />
```
#### JavaScript:
```javascript
$(function () {
$("#firstname").autocompleter({
limit: 5,
cache: true,
combine: function () {
var gender = $("input:radio[name=gender]:checked").val();
return {
gender: gender
};
},
callback: function (value, index) {
console.log( "Value "+value+" are selected (with index "+index+")." );
}
});
});
```
## Main structure:
Simple 3-level: ``div (node) -> ul (list) -> li (item)``.
```html
<div class="autocompleter" id="autocompleter-1">
<ul class="autocompleter-list">
<li class="autocompleter-item">First</li>
...
<li class="autocompleter-item">Last</li>
</ul>
</div>
```
没有合适的资源?快使用搜索试试~ 我知道了~
jQuery自动完成插件autocompleter
共24个文件
js:8个
css:4个
json:3个
需积分: 33 17 下载量 120 浏览量
2014-05-26
17:03:56
上传
评论
收藏 93KB ZIP 举报
温馨提示
autocompleter是一个简单的,容易的,可定制的自动完成功能插件,支持缓存。演示地址:http://www.jq22.com/jquery-info438
资源推荐
资源详情
资源评论
收起资源包目录
jq22.com-jquery-autocompleter-master.zip (24个子文件)
jquery插件库.url 119B
www.jq22.com.txt 111B
jquery-autocompleter-master
package.json 932B
jquery.autocompleter.css 955B
jquery.autocompleter.min.js 10KB
autocompleter.jquery.json 889B
LICENSE 1KB
CONTRIBUTING.md 433B
Gruntfile.js 3KB
src
jquery.autocompleter.css 741B
jquery.autocompleter.js 30KB
jquery.autocompleter.js 30KB
.gitignore 46B
README.md 5KB
bower.json 329B
demo
css
normalize.css 8KB
main.css 3KB
img
icon.png 8KB
bcg.png 8KB
index.html 1KB
js
jquery.min.js 94KB
jquery.autocompleter.js 29KB
main.js 14KB
modernizr-2.8.0.min.js 15KB
共 24 条
- 1
资源评论
jquery插件库-jq22com
- 粉丝: 14
- 资源: 301
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功