码迷,mamicode.com
首页 > Web开发 > 详细

jquery ui autocomplete ajax返回数据自定义显示

时间:2014-08-07 18:12:10      阅读:271      评论:0      收藏:0      [点我收藏+]

标签: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": "中国民生信托有限公司"
        }
    }
}

  

jquery ui autocomplete ajax返回数据自定义显示,布布扣,bubuko.com

jquery ui autocomplete ajax返回数据自定义显示

标签:des   blog   java   io   数据   cti   div   代码   

原文地址:http://www.cnblogs.com/knowlege/p/3897499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!