jquery autocomplete 扩充

最新推荐文章于 2024-09-16 15:26:35 发布

karlhell

最新推荐文章于 2024-09-16 15:26:35 发布

阅读量89

点赞数

分类专栏： JS 文章标签： jQuery CSS 制造 J# HTML ViewUI

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[color=red]此功能在原有的基础上增加了table列表的动态刷新显示[/color]

jquery.js 版本：1.2.6

[b]下面给出一个简单的例子来说明使用方法[/b]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
[color=YellowGreen]<!-- 引入所需的JS库 -->[/color]
<script type="text/javascript" src="lib/jquery.js"></script>
<script type='text/javascript' src='lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.autocomplete.css" />
</head>
<script type="text/javascript">
[color=YellowGreen]<!-- 制造一个测试用数据 -->[/color]
var websites = [{'id':'1','name':'aaa','pass':'123','age':'10'},{'id':'2','name':'abbb','pass':'321','age':'20'}]

$(function(){
$("#website").autocomplete(websites,        
{  minChars: '0',
    matchProperty:"name",
[color=YellowGreen]    <!--设置显示属性为name pass age-->[/color]
    listProperty:["name","pass","age"],
    resultProperty:["name"],
    idProperty:["id"],
[color=YellowGreen]    <!-- 设置name pass age 之间的分割符为 </td><td> 
           这里必须为"</td><td>"否则页面无法正常显示-->[/color]
    showPropertyDelimiter:"</td><td>",
[color=YellowGreen]<!-- 此属性是新增的
    如果要使用table必须在页面上写一个div标签，并设置componentId为div标签的id
      componentType 设置为table -->[/color]
[color=Red]    showComponent:{ componentId:"div1",
                               componentType:"table"}[/color]
}
);
});

</script>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
</p>
[color=Red]<div id="div1" >
</div>[/color]
</body>
</html>

[color=red]autocomplete.js修改内容：[/color]
红色部分为修改内容
[b]1. 第120行[/b]

}).blur(function() {
       hasFocus = 0;
      if (!config.mouseDownOnSelect) {
      //whether hide 如果显示方式为table则不隐藏结果
       [color=Red]if(options.showComponent.componentType!='table'){[/color]
        hideResults();
        [color=Red]}[/color]
}

[b]2. 第351行[/b]
jQuery.Autocompleter.defaults = {
//新增属性

showComponent:{
                //获得显示位置标签的ID
        componentId:"div",
                //获得显示方式 属性值为"ul"或者"table"
        componentType:"ul",
                //如果显示方式为table那么为其指定CSS
        tableClass: "table_results"       
},[/color]
......

[b]3.第554行[/b]
根据使用table或是ul创建不同的element及list

var element;
 var list;

    //showComponent is 'table' or 'ul'
    if(options.showComponent.componentType=='table'){
                element = jQuery("#"+options.showComponent.componentId);
                list=jQuery("<table>")
                    .appendTo(element)
                    .addClass(options.showComponent.tableClass);

    }else if(options.showComponent.componentType=='ul'){[/color]
    element = jQuery("<div>")
                .hide()
                .addClass(options.resultsClass)
                .css("position", "absolute")
                .appendTo("body");

       list = jQuery("<ul>").appendTo(element).mouseover( function(event) {
        if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI')
        {
            active = jQuery("li", list).removeClass().index(target(event));
                    jQuery(target(event)).addClass(CLASSES.ACTIVE);            
        }
        }).mouseout( function(event) {
        // why we must to do that? is it really needed ?
        /*jQuery(target(event)).removeClass();*/
        return;
        }).click(function(event) {
                jQuery(target(event)).addClass(CLASSES.ACTIVE);
                select();
                input.focus();
                return false;
        }).mousedown(function() {
                config.mouseDownOnSelect = true;
        }).mouseup(function() {
                config.mouseDownOnSelect = false;
        });

   }
......

[b]第662行 fillList()方法[/b]
根据显示方式为table或ul对生成对应的数据

function fillList() {
                list.empty();

                //showComponent is 'table' 
[color=Red]                if(options.showComponent.componentType=='table'){
                var tr = jQuery("<tr>");
                var title = options.listProperty;
                title = title.toString(title).split(",");


                for(var j=0;j<title.length;j++){
                        tr.append("<td>"+title[j]+"</td>");
                }
                tr.appendTo(list);
                }[/color]

                var num = limitNumberOfItems(data.length);
                for (var i=0; i < num; i++) {


                        if (!data[i])
                                continue;

                        var formatted = options.formatItem ? options.formatItem(data[i].data, i+1, num, data[i].value) : defaultFormatItem(data[i].data,i+1, num);

                        if ( formatted === false )
                                continue;

                        //showComponent is 'table' or 'ul'
                  [color=Red]   if(options.showComponent.componentType=='table'){[/color]

                        jQuery("<tr>").html( "<td>"+options.highlight(formatted, term)+"</td>" ).appendTo(list)[0].index = i ;

                        [color=Red]} [/color]
                        [color=Red]else if(options.showComponent.componentType=='ul'){[/color]
                        jQuery("<li>").html( options.highlight(formatted, term) ).appendTo(list)[0].index = i;
                        [color=Red]}[/color]



                }

                //showComponent is 'table' or 'ul'
                [color=Red]if(options.showComponent.componentType=='table'){[/color]
                listItems = list.find("tr");
                [color=Red]}else if(options.showComponent.componentType=='ul'){[/color]
                listItems = list.find("li");
                [color=Red]}[/color]
                if ( options.selectFirst ) {
                        //showComponent is  'ul'
                        [color=Red]if(options.showComponent.componentType=='ul'){[/color]
                        listItems.slice(0, 1).addClass(CLASSES.ACTIVE);
                        active = 0;
                        [color=Red]}[/color]
                }
                if( options.moreItems.length > 0 && !options.scroll) moreItems.css("display", (data.length > num)? "block" : "none");
                list.bgiframe();
        }