跟风玩玩JavaScript Suggest效果

　　百度、谷歌的搜索提示是一个很cool的效果，恰逢美大（@司徒正美）前几天做了一个demo，于是自己也来实现一番，实现的思路有别于美大，可以对比着研究。

　　传送门——美大实现版：javascript suggest效果（mass framewrok很强大，强烈建议关注）

　　@个人实现效果（没有用框架...同时懒得做IE678的兼容...的草稿版，chrome下效果尤佳），实际效果也是查询当前浏览器的对象和属性：
　　　　↑＿怒击链接下载实例

低调的声明：
　　1.由于是用原生js写的，而且没有做兼容，IE下不要指望正常了（= = !），有兴趣的话可以按思路用框架封装（广告：推荐司徒大大的mass框架）。
　　2.这里重点只表现出实现的思路。兼容性和代码组织、细节、性能优化等等忽略了。

效果比较简单，有几点供大家思考：
　　1.数据的查询方式可以通过search函数改变（如改成ajax）。
　　2.按键即触发查询，按键事件是绑定在keyup而不是keypress。
　　3.按上下键选择suggest条目的按键事件是绑定在keydown而不是keypress。
　　4.suggest条目较多时出现滚动条，由于按上下键选择suggest条时焦点在input，所以需要修正可视区域。
　　5.suggest框的显隐时机。
 

html结构：
　　输入框input，suggest框ul

<div id="warpper">
        <input type="text" id="search" autocomplete="off" />
        <ul id="suggest"></ul>
    </div>

#warpper{
        position:relative;
    }
    #search{
        width:400px;
        height:20px;
    }
    #suggest{
        position:absolute;
        top:30px;
        width:400px;
        max-height:400px;
        overflow:auto;
        display:none;
        border:1px solid #20815D;
        list-style:none;margin:0;padding:0;
        cursor:default;
    }
    .color{
        background-color:#BDF400;
    }
    li{
        margin:0;padding-left:5px;height:20px;
    }

 

js部分：
1.search的实现：
　　通过该search可以实现其他的查询方式或查询其他的数据，只要把查询结果以数组形式赋给output即可。

　　这里的search实现的是查找当前浏览器的对象和属性。

    // 查找函数，可以换成ajax请求服务器json
    // 这个search函数只是用来寻找当前浏览器下的全局对象和变量
    function search(val){
        // 触发查找的时候先隐藏掉suggest，里面已经不是想要的信息了
        ul.style.display = "none";
        // 清空输出数组，用来填充新数据
        output = [];
        var matchObj = val.split('.');//每一个点号都代表一次对象的属性查找
        if(matchObj.length>1){
            // 第一次搜索是从全局对象window开始
            var currentObj = window;
            for(var i = 0,len = matchObj.length; i < len; i++){
                //搜索window下的各级对象
                if(!currentObj[matchObj[i]]){
                    break;
                }
                currentObj = currentObj[matchObj[i]];
            }
            var left = len - i;
            if(left===1){
                var rProp = new RegExp("^"+matchObj[i]);
                for(var prop in currentObj){
                    if(rProp.test(prop)){
                        matchObj[len-1] = prop;
                        output.push(matchObj.join('.'));
                    }
                }
            }else if(left===0){
                //正好匹配，其实可以不输出的。
                output.push(val);
            }
        }else{
            //搜索window下带val字符串开头的属性
            var rProp = new RegExp("^"+val);
            for(var prop in window){
                if(rProp.test(prop)){
                    output.push(prop);
                }
            }
        }
    }

 

2.inupt上的按键事件（查询数据，弹出suggest框，选择suggest条目，改变input值等）：

    input.onkeyup = function(e){
        if(e.keyCode !== 38 && e.keyCode !==40){
            // 不是上下方向键，则进行搜索，这里的搜索函数可以自定义，或者写成ajax请求
            search(this.value);
            // 取得数据后就可以调用createBox()生成并显示suggest框了
            createBox();
        }
    }
    input.onkeydown = function(e){
        //toggleColor();切换选中项颜色
        //input.val = li.textcontent;
        // 上下方向键，进行createBox或者对选项切换颜色
        if(e.keyCode === 38 || e.keyCode ===40){
            // 如果是在suggest显示的状态下按上下方向键，那么改变高亮状态和修正位置
            if(ul.style.display==="block"){
                for(var i = 0,len = liSet.length; i<len;i++){
                    if(liSet[i].className === 'color'){
                        break;
                    }
                }
                if(i===len){
                    // 如果没有高亮状态，那么定义第一个高亮
                    liSet[0].className = 'color';
                    input.value = liSet[0].textContent;
                }else{
                    // 取消当前高亮元素的高亮状态
                    liSet[i].className = '';
                    
                    if(e.keyCode === 40){//设置高亮，修正位置
                        i = ++i%len;
                        liSet[i].className = 'color';
                        fixScrollPos(i);
                    }else{//设置高亮，修正位置
                        i = (--i+len)%len;
                        liSet[i].className = 'color';
                        e.preventDefault();//阻止光标默认操作，使得光标一直在右边
                        fixScrollPos(i);
                    }
                }
            // 按上下键的时候还没有显示suggest，那么此时显示出来，并且不设置高亮
            }else{
                if(output.length){
                    // 删除高亮
                    for(var i = 0,len = liSet.length; i<len;i++){
                        liSet[i].className = '';
                    }
                    // 显示suggest
                    ul.style.display = "block";
                }
            }
        }
    }

 

3.绑定在ul上的事件（选中suggest条目，鼠标划过条目时高亮等）

    // 定义suggest的行为
    ul.onclick = function(e){
        // 单击li的时候添加对应的文字到input里
        if(e.target.nodeName.toLowerCase() === 'li') input.value = e.target.textContent;
    }
    ul.onmouseover = function(e){
        // 定义鼠标划过时suggest的高亮
        for(var i = 0,len = liSet.length; i<len;i++){
            liSet[i].className = '';
        }
        if(e.target.nodeName.toLowerCase() === 'li') e.target.className = 'color';
    }

 

4.suggest的消失时机

    document.onclick = function(e){
        // 此处定义suggest何时消失，点击非input和ul下拉框则隐藏掉suggest
        if(e.target!==input&&e.target!==ul) ul.style.display = "none";
    }

 

5.suggest条目过多显示滚动条时，对上下按键触发的滚动效果模拟（此时焦点在input需要另外对suggest可视区域位置进行修正）

    // 修正滚动条位置
    function fixScrollPos(pos){
        var sTop = ul.scrollTop;//先取得可视区的上边缘高
        var viewHeight = parseInt(document.defaultView.getComputedStyle(ul,null).height,10);//可视区的高度
        var sBottom = sTop + viewHeight;//可视区底部距离到ul顶部的高度
        var itemHeight = liSet[0].offsetHeight;//假设这里没有margin，如果有的话自己补上
        var liPos = pos*itemHeight;//当前li距离ul顶部的高度
        
        if( liPos >= sBottom){//选中的li在可视区下
            ul.scrollTop = liPos - ( viewHeight - itemHeight );
        }else if( liPos < sTop){//选中的li在可视区上
            ul.scrollTop = liPos;
        }
        liSet[pos].className = 'color';
        input.value = liSet[pos].textContent;
    }

 

基本介绍完了，更详细的可以看源代码：
　　再次怒击链接下载实例