js是否可以支持方向键？

我在网上看到一个仿google提示的例子，不错，但还是有瑕疵 .可以在这里测试：  http://mylovebb.com/TEST/GOOGLE/index.asp 输入之后可以自动出现提示信息，用鼠标点击没有问题，但一般更习惯用 “下方向键”进行选择，如何更改可以支持 “下方向键”呢？关键的代码如下： document.getElementById("search_suggest").style.display="block";
for (i=0;i<n_messages;i++ )
{
var suggest='<div onmouseover="javascript:suggestOver(this);"';
suggest+='onmouseout="javascript:sugggestOut(this);"';
suggest+='onclick="javascript:setSearch(this.innerHTML);"';
suggest +='class="suggest_link">'+message_nodes[i].getElementsByTagName("cname")[0].firstChild.data + '</div>';
ss.innerHTML +=suggest;
} 这里指定了ONCLICK 事件执行：function setSearch(div_value)
{
   document.getElementById("txtSearch").value=div_value;
   document.getElementById("search_suggest").innerHTML="";
   document.getElementById("search_suggest").style.display="none";
}
如何才能支持下方向键呢？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

给search_suggest这个对象添加一个onkeydown事件，大致实现方法入下        function upOrDown(){
alert(event.keyCode);
if(event.keyCode == 40){//down
  //操作suggest对象列表中的焦点向下移动
}
if(event.keyCode == 38){//up
  //操作suggest对象列表中的焦点向上移动
}
}
当然支持方向键，jQuery 方向键控制例子：$(document).bind("keydown","left",function(){...});
可以啊  使用onkeydown事件就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<style type='text/css'>
div, ul, li, p{ margin:0; padding:0; list-style:none;}
.content{margin:0 auto; display:block; width:400px; height:100px;}
.content textarea{ width:400px; height:100px;}
#dialog{ width:200px; height:300px; border:1px solid #000; background:#fff; display:none;}
#dialog ul li{ width:190px; height:25px; line-height:25px; border-bottom:1px solid #666 }
#dialog ul li.selected{ background:blue; color:#fff;}
</style><script type="text/javascript">
//会话打开状态
var OPEN = 0;
//会话关闭状态
var CLOSE = 1;//会话类，用与选择@对象
var Dialog = function( placeholderid ) {

    var placeholder = $( document.getElementById( placeholderid ) );

    var data;
    var maxIndex;
    var currentIndex;
    var self = this;
    var eventState = false;

    //按下回车键后触发的事件
    this.entered = new Function( 'data', '' );

    this.load = function( d ) {
        data = d;
        maxIndex = data.length - 1;
        currentIndex = 0;

        this.setDialogText( getHtml() );
        refreshDialog();
    }

    this.show = function( left, top ) {
        placeholder.css({
            'position': 'absolute',
            'left': left,
            'top': top,
            'display': 'block'
        });

        if( !eventState ) bindKeyEvent();
    }

    this.getStatus = function() {
        return placeholder.css( 'display' ) == 'none' ? CLOSE : OPEN;
    }

    this.hide = function() {
        placeholder.hide();
        unbindKeyEvent();
    }

    this.setDialogText = function( text ) {
        placeholder.html( text );
    }

    var getHtml = function() {
        var html = '';
        for( var i = 0; i < data.length; i ++ ) {
            html += '<li> ' + data[ i ] + ' </li>';
        }
        html = '<ul>' + html + '</ul>';
        html = '<p>关键字：' + data.keywords +'</p>' + html;
        return html;
    }


    var refreshDialog = function() {
        var elItems = placeholder.find( 'ul li' );
        elItems.removeClass( 'selected' );
        $( elItems[ currentIndex ] ).addClass( 'selected' );
    }

    var moveNext = function() {
        if( currentIndex == maxIndex ) {
            currentIndex = 0;
        } else {
            currentIndex ++;
        }

        refreshDialog();
    }

    var movePrev = function() {
        if( currentIndex == 0 ) {
            currentIndex = maxIndex
        } else {
            currentIndex --;
        }

        refreshDialog();
    }

    var enter = function() {
        self.hide();
        var selectedItem = data[ currentIndex ];
        self.entered( selectedItem );
    }

    var keyEvent = function( e ) {
        var keycode = e.keyCode;
        switch( keycode ) {
            //向上
            case 38:
                movePrev();
                break;
            //向下
            case 40:
                moveNext();
                break;
            //回车
            case 13:
                enter();
                break;
        }
    }

    var bindKeyEvent = function() {
        $(document).bind( 'keydown', keyEvent );
        eventState = true;
    }

    var unbindKeyEvent = function() {
        $(document).unbind( 'keydown', keyEvent );
        eventState = false;
    }

}</script>
</head><body>
<input type="text" id="txt" size="20" />
<div id="dialog"></div>
<script>
var dialog = new Dialog( 'dialog' );
dialog.entered = function( data ) {
    $( '#txt' ).val( data );
}
$( '#txt' ).bind( 'keyup', function( e ) {
    var keycode = e.keyCode;
    if( keycode == 38 || keycode == 40 || keycode == 13 ) return;
    var data = [
            "abcdefg",
            "1234567",
            "abcdefg",
            "1234567",
            "abcdefg",
            "1234567",
            "abcdefg",
            "1234567",
            "abcdefg",
            "1234567"
        ];
    dialog.load( data );
    var offset = $( this ).offset();
    dialog.show(offset.left, offset.top + 20 )
} );
</script>
</body>
</html>楼主参考

js是否可以支持 方向键？

解决方案 »

js是否可以支持方向键？