`
karlhell
  • 浏览: 105686 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery autocomplete 扩充

    博客分类：
  • JS
jQueryCSS制造J#HTML
阅读更多
此功能在原有的基础上增加了table列表的动态刷新显示

jquery.js 版本：1.2.6

下面给出一个简单的例子来说明使用方法 
<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>


autocomplete.js修改内容：
红色部分为修改内容
1. 第120行 
}).blur(function() {
       hasFocus = 0;
      if (!config.mouseDownOnSelect) {
      //whether hide 如果显示方式为table则不隐藏结果
       [color=Red]if(options.showComponent.componentType!='table'){[/color]
        hideResults();
        [color=Red]}[/color]
}


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


3.第554行
根据使用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;
        });
    
   }
......


第662行 fillList()方法
根据显示方式为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();
        }


分享到：
| KvaTree-Jquery-plugin研究使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics