jquery使用案例——jquery.auto-complete

在某些场景下提供自动补全可以大大提高用户体验(如下面例子中需要输入房屋编号的场景)，通过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>

效果图