首页 > 代码库 > jquery ui autocomplete ajax返回数据自定义显示
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": "中国民生信托有限公司" } }}
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。