在某些场景下提供自动补全可以大大提高用户体验(如下面例子中需要输入房屋编号的场景)，通过jquery.auto-complete.js提供的方法为需要自动补全的输入框设置参数并绑定json数据即可实现，并且有美观的预定义样式，响应速度快，用户体验良好，可以设置自动补全提示内容的排列顺序等。
/*
代码片段：利用jquery.auto-complete实现简单的自动补全
*/
//引入库文件
<link.../>
<script ...></script>
...
//表单部分，为需要补全的输入框定义ID
<div class="control-group">
<label class="control-label">id: </label>
<div class="controls">
<input type="text" id="houseId" autofocus class="span6" name="debt.cHouseId">
</div>
</div>
//JavaScript部分
<script>
$(function(){
//调用方法以设置参数并绑定数据
$('#houseId').autoComplete({
minChars: 1,
source: function(term, suggest){
term = term.toLowerCase();
/*
jsonOption 为由数据库内容生成的的json字符串
格式 ['Java', 'JavaScript', PHP', 'Python', SQL']
*/
var choices = ${jsonOption};
var suggestions = [];
//排序
for (i=0;i<choices.length;i++)
if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);
suggest(suggestions);
}
});
});
</script>
效果图
