jquery ui autocomplete 个人使用记录
自定义数据提示
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 };