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的。如果要使用其他的属性。好吧。。。就用这个方法改造把。具体的详读程序吧。





 » 订阅本站:RSS订阅

发表评论

您也可以使用微博账号登陆

无觅相关文章插件,快速提升流量