jQuery自動完成插件autocompleter

2024-04-27 15:17:54

字體：大中小

來源：轉載

供稿：網友

插件描述：autocompleter是一個簡單的，容易的，可定制的自動完成功能插件，支持緩存。

使用方法：

添加引用

最低要求：jquery.autocompleter.CSS和jquery.autocompleter.min.js。

腳本：

12	`<script` `src="js/jquery.js"` `type="text/javascript"></script><script` `src="js/jquery.autocompleter.min.js"` `type="text/Javascript"></script>`

樣式：

1	`<link` `rel="stylesheet"` `href="css/jquery.autocompleter.css">`

定義你的autocompleter：

123	`$(function` `() {` `$('input').autocompleter({ source:` `'path/to/get_data_request'` `});});`

或用于本地JSON來源：

12345678 var data = [ { "value": "1", "label": "one" }, { "value": "2", "label": "two" }, { "value": "3", "label": "three" }];$(function () { $('input').autocompleter({ source: data });});

如果你不會在源對象定義了一個值，標簽將被用作后選擇在輸入字段的默認值。

方法：

插件后更改選項的定義：

1	`$('#input').autocompleter('option', data);`

例如：

1234	`$('#input').autocompleter('option', {` `limit: 5,` `template:` `'<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'});`

開放列表：

1	`$('#input').autocompleter('open');`

關閉頁面：

1	`$('#input').autocompleter('close');`

摧毀插件：

1	`$('#input').autocompleter('destroy');`

清除所有緩存：

1	`$.autocompleter('clearCache');`

設置默認值：

123	`$.autocompleter('defaults', {` `customClass:` `'myClassForAutocompleter'});`

例如：

Autocompleter第一名稱輸入緩存,匹配強調限制和5的結果。

形式：

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

123456789101112131415 $(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+")." ); } });});

主要結構：

1234567 <div class="autocompleter" id="autocompleter-1"> <ul class="autocompleter-list"> <li class="autocompleter-item">First</li> ... <li class="autocompleter-item">Last</li> </ul></div>