1

我有一个包含 4 个子 Div 标签的 Div 标签

 
   <Div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
  </Div>

现在我想通过 Javascript 使用向上和向下箭头键访问这些子 div 上面的 div 是在单击 TextBox 时显示的。我希望用户可以选择任何子 div，并且它的选定值出现在 TextBox 中。我通过将 onClick 事件附加到每个 childDiv 来实现最终结果。

4

4 回答 4

5

这是一个帮助您入门的免费图书馆解决方案。

您可能希望添加在文本框获得或失去焦点时隐藏和显示 div 的事件。也许 [esc] 应该清除选择？（我没有在ie中测试过）

<style>div.active{ background: red }</style>

<input type="text" id="tb">

<div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
</div>
<script type="text/javascript">


function autocomplete( textBoxId, containerDivId ) {
    var ac = this;
    this.textbox     = document.getElementById(textBoxId);
    this.div         = document.getElementById(containerDivId);
    this.list        = this.div.getElementsByTagName('div');
    this.pointer     = null;

    this.textbox.onkeydown = function( e ) {
        e = e || window.event;
        switch( e.keyCode ) {
            case 38: //up
                ac.selectDiv(-1);
                break;
            case 40: //down
                ac.selectDiv(1);
                break;
        }
    }

    this.selectDiv = function( inc ) {
        if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
            this.list[this.pointer].className = '';
            this.pointer += inc;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
        if( this.pointer === null ) {
            this.pointer = 0;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
    }
} 

new autocomplete( 'tb', 'Parent' );
</script>
于 2008-12-31T10:09:00.957 回答
1

您是否在寻找所谓的自动完成或建议？

于 2008-12-31T07:16:58.573 回答
0

您肯定在寻找“自动建议/自动完成”如果您想在纯 javascript 中完全实现，这是相当耗时的，但是是的，您可以使用 strager 中的示例开始。

我建议改用JQuery。JQuery 有一个非常好的自动完成插件，您可以使用它。几天前我刚刚在我的一个项目中实施，它似乎工作正常。

在制作软件时必须记住一句重要的谚语——“不要试图重新发明轮子”。

如果其他程序员已经这样做了，并且他们很乐意分享，使用它，并感谢他们。

干杯!

于 2008-12-31T07:37:30.857 回答
-1

你是什​​么意思“用箭头键访问它们”？每个 div 中都有文本......它们不包含任何交互元素，因此键盘在这里没有相关性。也许您需要详细说明您的问题？

于 2008-12-31T07:08:59.370 回答