1、body里面的內容
<input type="text" class="inputTxt" id="txtJigou" autocomplete="off"/>
2、引入jquery.ui.min.js和他的樣式
3.js代碼如下<script type="text/javascript">
$(function(){ $("#txtJigou").autocomplete({ source: function( request, response ) { $.ajax({ url: "/Home/Organization/getList.html", dataType: "json", data: { "name": "中","typeid":"11" }, success: function( data1 ) { if(data1.state==1){ //data1返回json格式如下 response(data1.data); } } }); }, minLength:1, autoFocus:true, focus: function( event, ui ) { $( "#txtJigou" ).val( ui.item.company ); return false; }, select: function( event, ui ) { $( "#txtJigou" ).val( ui.item.company ); return false; } }).autocomplete( "instance" )._renderItem = function( ul, item ) {
//這里是自定義顯示的數據,我需要顯示的數據是上面的data1.data return $( "<li>" ) .append( "<a>" + item.company + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script>
4、返回JSON的數據如下
{ "state": 1, "data": { "10013": { "id": "10013", "company": "金谷信托", "alias": "中國金谷國際信托有限責任公司" }, "11031": { "id": "11036", "company": "民生信托", "alias": "中國民生信托有限公司" } } }