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 $("
").append("
" + item.name +"-"+item.code +"
").appendTo(ul);
    };