JQueryUI-autoComplete控件使用详解

最新推荐文章于 2023-04-08 08:23:38 发布

第八个猴子

最新推荐文章于 2023-04-08 08:23:38 发布

阅读量143

点赞数

文章标签： ui json

原文链接：http://www.cnblogs.com/JosephLiu/archive/2012/01/12/2320707.html

版权

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