JQueryUI-autoComplete控件使用详解

JQueryUI的东西,说简单,简单,但是灵活性稍微有些不足。

接下来是我在工作中遇到的一则应用,感觉是挺平常的,但是却还找不到很对应的。所以写下,记录下。
直接上代码: 

    $(function() {
$( "#CatalogText" ).autocomplete({
minLength: <%=int.Parse(ConfigurationManager.AppSettings["MinReactLength"] ?? "1") %>,
source: "SearchTerm.ashx?catagory=2&languagecode=en",
focus: function( event, ui ) {
$( "#CatalogText" ).val( ui.item.TextField );
return false;
},
open:function(){
$("#CatalogValue").val("");
},
select: function( event, ui ) {
$( "#CatalogText" ).val( ui.item.TextField );
$( "#CatalogValue" ).val( ui.item.ValueField );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.TextField + "</a>" )
.appendTo( ul );
};
});

这里的CatalogText表示目录的显示值,CatalogValue对应值。这里着重介绍这么几个关键字,source,data 

先说Search,我这里使用的是连接远程的脚本,返回的是一个json字符串。在这里,你可能会奇怪,怎么没有我们输入的值你?其实默认情况下,我们的输入会作为term自动加入到请求中,请求会变成SearchTerm.ashx?catagory=2&languagecode=en&term=我们的输入,所以,你不用再费心拼贴字符串了。但是,也出了额外的问题,我们怎么动态改变这个链接呢?很遗憾。。。读源码吧。。。不过也不用全部,就是autocomplete的方法和data方法的。

这里要说data了。这个函数用于我们自定样式,默认情况下,程序是识别label和value的。如果要使用其他的属性。好吧。。。就用这个方法改造把。具体的详读程序把。

转载于:https://www.cnblogs.com/JosephLiu/archive/2012/01/12/2320707.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值