添加引用
最低要求：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> |
新聞熱點
疑難解答
