jquery ui autocomplete ajax返回数据自定义显示
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": "中国民生信托有限公司" } } }