我有以下
HTML结构(‘ul li’呈现为下拉/选择)
- <input id="input_city" type="text" />
- <div class="suggestions">
- <ul>
- <li value="0" name="New York">New York</li>
- <li value="1" name="London">London</li>
- <li value="2" name="Paris">Paris</li>
- <li value="3" name="Sydney">Sydney</li>
- </ul>
- </div>
需要JavaScript / jQuery代码来捕获向下箭头键按下事件(在输入上),它将选择第一个’li’元素
连续向下键选择下一个’li’元素;和向上键选择以前的’li’元素.
解决方法
既然你的问题有点过于模糊,那么你要完成的目标并不完全清楚.
如果您要突出显示li元素,请使用以下命令：
- var $listItems = $('li');
- $('input').keydown(function(e)
- {
- var key = e.keyCode,$selected = $listItems.filter('.selected'),$current;
- if ( key != 40 && key != 38 ) return;
- $listItems.removeClass('selected');
- if ( key == 40 ) // Down key
- {
- if ( ! $selected.length || $selected.is(':last-child') ) {
- $current = $listItems.eq(0);
- }
- else {
- $current = $selected.next();
- }
- }
- else if ( key == 38 ) // Up key
- {
- if ( ! $selected.length || $selected.is(':first-child') ) {
- $current = $listItems.last();
- }
- else {
- $current = $selected.prev();
- }
- }
- $current.addClass('selected');
- });
这是小提琴：http://jsfiddle.net/GSKpT/
如果您只是尝试设置输入字段的值,请将最后一行更改为：
- $(this).val ( $current.addClass('selected').text() );
