您的位置：首页 > Web前端 > JQuery

jquery ui autocomplete 个人使用记录

2012-09-20 14:28 633 查看
自定义数据提示

var taxdata = [{ "code": "1", "name": "经营单位" }, { "code": "2", "name": "收/发货单位" }, { "code": "3", "name": "申报单位"}];



var nullval = [{ "code": "", "name": "没有数据" }];

response($.map(nullval, function (item) {

return { code: item.code, name: item.name, label: item.code + "　" + item.name };

}));



javascript:

$("#txtSingleCode").autocomplete({

        source: function (request, response) {

            $.ajax({

                url: "/Declarations/GetSupervision",//ajax取值

                type: "post",

                data: { "value": request.term },

                success: function (result) {

                    response($.map(result, function (item) {

                        return { code: item.Supervision_Code, name: item.Supervision_Name, label: item.Supervision_Code + "　" + item.Supervision_Name };

                    }));

                }

            });

        },

        focus: function (event, ui) {

            $("#txtSingleCode").val(ui.item.code);

            return false;

        },

        select: function (event, ui) {

            $("#txtSingleCode").val(ui.item.code);

            return false;

        },

        autoFocus: true

    });

Controller

public ActionResult GetSupervision(string value)

        {

            value =System.Web.HttpUtility.UrlDecode(value); // 对中文进行 解码

            var  result = decla.GetSupervision(value);

            return Json(result);

            

        }

autocomplete文件

search: function( value, event ) {

value = value != null ? value : this.element.val();

        value = encodeURI(value);// 请注意这行代码，是后加上去的对中文进行编码

// always save the actual value, not the one passed as an argument

this.term = this.element.val();

if ( value.length < this.options.minLength ) {

return this.close( event );

}

CSS文件修改

/* Component containers

----------------------------------*/

/*.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

.ui-widget .ui-widget { font-size: 1em; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }

.ui-widget-content a { color: #333333; }

.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

.ui-widget-header a { color: #ffffff; }*/

这部分禁用

/* Interaction states

.ui-autocomplete { position: absolute; cursor: default;background-color:white;overflow-y:hidden ;overflow-y:scroll; max-height:100px }此处进行修改

/* Component containers
----------------------------------*/
/*.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

response($.map(nullval, function (item) {
                            return { code: item.code, name: item.name, label: item.code + "　" + item.name };
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航