Page 68 - JavaScript修炼之道

任务25 自动完成输入 57

自动完成的HTML代码

form/autocompletion/index.html

<div class="p" id="local">
<label for="edtCachedSearch">Local search:</label>
<input type="text" id="edtCachedSearch" name="search" type="text" />
<div class="completions"></div>
</div>

设置可读性更好的样式

form/autocompletion/autocompletion.css

.completions {
border: 1px solid silver; background: white; font-size: 80%; z-index: 2;
}
.completions ul { margin: 0; padding: 0; list-style-type: none; }
.completions li { line-height: 1.5em; white-space: nowrap;
overflow: hidden; }
.completions li.selected { background: #ffa; }
.completions strong { color: green; }
用客户端里的数据源做自动完成

form/autocompletion/autocompletion.js

var FREQUENT_SEARCHES = [
'JavaScript', 'JavaScript frameworks', 'Prototype', 'jQuery', 'Dojo',
'MooTools', 'Ext', 'Ext JS', 'script.aculo.us', 'Scripty2', 'Ajax',
'XHR', '42'
];

function initLocalCompletions() {
var field = $('edtCachedSearch'), zone = field.next('.completions');
new Autocompleter.Local(field, zone, FREQUENT_SEARCHES,
{ fullSearch: true });
}
用Ajax做自动完成

form/autocompletion/autocompletion.js

function initAjaxCompletions() {
var field = $('edtAjaxSearch'), zone = field.next('.completions');
new Ajax.Autocompleter(field, zone, 'autocomplete.php', {
method: 'get', paramName: 'search' });
}
相关任务

 任务23