jQuery UI Autocomplete

jQuery UI Autocomplete 体验：链接

更多的资料请看jQuery UI Autocomplete官方演示：http://jqueryui.com/demos/autocomplete

====================DEMO=================================

DEMO:使用autocomplete做成下拉选项为2列的列表，效果如下图：

以下是主要代码部分：

/*====add for autocomplete begin======*/
.liStyle dt{
float:left;
display: block !important;
width:120px; 
height:auto;
padding:2px;
margin:0;
border-right:#D2D2D2 1px solid;
border-bottom:#D2D2D2 1px solid;
line-height:16px;
color:#000;
}

.liStyle dl{
display:inline-block !important;
margin:0px;
border-left:#D2D2D2 1px solid;
}
.ulStyle .liStyle:first-of-type dl{
display:inline-block !important;
margin:0px;
border-top:#D2D2D2 1px solid;
}
 .liStyle{
width:256px; 
height:auto;
padding:3px 0px !important;
margin:-3px auto !important;
font-size:12px;
list-style-type:none;
}
 .liStyle:after {
content: ".";
display: none;
height: 0;
clear: both;
visibility: hidden;
}
/*====add for autocomplete begin======*/

(function (window, undefined) {
    //ajaxbox获取人员
    var getEmpList = "test10.aspx";
        /*自动检索，选择员工*/
    $.autoSelectEmployee = function (element) {
        if (element == "" || element == null) {
            return;
        }
        $(element).autocomplete({
            source: //getEmpList
                function (request, response) {
                    $.ajax({
                        url: getEmpList,
                        dataType: "json",
                        cache: false,
                        type: "post",
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            $.each(data, function (i, n) {
                                n.label = n.name;//选择项的text值
                                n.value = n.bomid;//选择项的value值
                            })
                            response(data);
                        }
                    });
                }
               , minLength: 0
               , delay: 500
               , select: function (e, ui) {
                   $(element).val(ui.item.label);
                   $(element).next().val(ui.item.value);
                   return false;
               }
               , change: function (e, ui) {
                   if (ui.item == null) {
                       $(element).next().val("");
                   }
                   return true;
               }
        }).autocomplete("instance")._renderMenu = function (ul, items) {
            $(ul).addClass("ulStyle liStyle").css("border", "0px solid #dddddd");
            $(ul).data("ui-autocomplete-item", {});//该行不加会报错
            $.each(items, function (index, item) {
                $("<li class=\"liStyle ui-menu-item\">").append("<dl><dt>" + item.name + "</dt><dt>" + item.NativePlace + "</dt></dl>").appendTo(ul)
                    .data("ui-autocomplete-item", item);
            });
        };
    };
   

})(window)

 $(function () {
            $.autoSelectEmployee($("#ProjectEngineer_Name"));//项目工程师
        })

 <div>
     <input type="text" value="" style="width:150px;" name="ProjectEngineer_Name" id="ProjectEngineer_Name" class="ui-autocomplete-input" autocomplete="off"/>
     <input type="hidden" value="" name="ProjectEngineer_Id" id="ProjectEngineer_Id"/>
    </div>