jquery ui autocomplete ajax返回資料自訂顯示

標籤：des   blog   java   io   資料   cti   div   代碼   

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": "中國民生信託有限公司"        }    }}