AutoComplete 上手

Jquery UI的一个widgets
官网 :http://jqueryui.com/autocomplete/

• 首先要引入Jquery js 、Jquery UI 的css 和 js
• 配合ajax使用

 $("#name").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: yourUrl",
                dataType: "json",
                type:"POST",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                data: {
                    "name": request.term
                },
                success: function(data) {
                    response($.map(data, function(item) {
                         return {
                             name: item.name,
                             code: item.code
                         }
                     }));

                }
            });
        },
        minLength: 1,  //触发控件最小输入长度
        autoFocus: true, //默认选中第一个元素
        select: function(event, ui) {
            $("#name").val(ui.item.name);
            return false; //此段很重要，否则选中后input赋值会变空
        }
    }).autocomplete("instance")._renderItem = function(ul, item) {
        return $("<li>").append("<div>" + item.name +"-"+item.code +"</div>").appendTo(ul);
    };

<style type="text/css">
.ui-autocomplete {
max-height: 160px; //选择框高度
overflow-y: auto;
overflow-x: hidden; //溢出自动隐藏
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>