JQuery клавиша со стрелкой навигации - PullRequest
Новая
       27

JQuery клавиша со стрелкой навигации

7 голосов
/ 04 апреля 2011

У меня есть эти текстовое поле и раскрывающееся меню для Facebook, такие как автозаполнение: 

<input type="text" id="search" name="search_fld"/>

<div id="display">
<div class="display_box">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

Мой CSS: 

.display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

Как мне достичь состояния 'hover' с помощью клавиши со стрелкой вниз от моего ввода "search_fld" к первому "display_box" и так далее для всех div "display"?

Вот ссылка на код jsfiddle .

Ответы [ 4 ]

9 голосов
/ 04 апреля 2011

Вы не можете идеально эмулировать состояние при наведении. Не исключено добавление «реального» класса с тем же стилем: 

.display_box_hover, .display_box:hover
{
  background:#3b5998;
  color:#FFFFFF;
}

Теперь этот код будет "перемещаться" по элементам: 

window.displayBoxIndex = -1;

$("#search").keyup(function(e) 
{
        if (e.keyCode == 40) 
        {  
            Navigate(1);
        }
        if(e.keyCode==38)
        {
            Navigate(-1);
        }

});

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".display_box");
    if (displayBoxIndex >= oBoxCollection.length)
         displayBoxIndex = 0;
    if (displayBoxIndex < 0)
         displayBoxIndex = oBoxCollection.length - 1;
    var cssClass = "display_box_hover";
    oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}

Это «запомнит» индекс последнего «выбранного» элемента и переключится на следующий или предыдущий элемент, используя функцию eq() и добавив класс сверху к этому выбранному элементу.

Обновлен jsFiddle .

4 голосов
/ 04 апреля 2011

Конечно, это некрасиво.На скрипке здесь . 

<script src="jquery.js"></script>

<script>
$(function (){

        $('.display_box').hover(function (){            
            $(this).attr('class', 'display_box current')
        }, function (){
            $(this).attr('class', 'display_box');
        });

        $('#search').keyup(
            function (e){
                var curr = $('#display').find('.current');
                if (e.keyCode == 40) 
                {                                   
                    if(curr.length)
                    {
                            $(curr).attr('class', 'display_box');
                            $(curr).next().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:first-child').attr('class', 'display_box current');
                    }                   
                }
                if(e.keyCode==38)
                {                                       
                    if(curr.length)
                    {                           
                            $(curr).attr('class', 'display_box');
                            $(curr).prev().attr('class', 'display_box current');
                    }
                    else{
                        $('#display div:last-child').attr('class', 'display_box current');
                    }           
                }
            }       
        )

    });
</script>
<style>
.current{
  background:#3b5998;
  color:#FFFFFF;
}
</style>

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>
1 голос
/ 11 июня 2013

Для реализации текстового поля автопредоставления было бы лучше использовать тег 'datalist', как показано ниже: 

<input list="search" name="search_fld"/>
  <datalist id="search">
     <option value="Luca"/>
     <option value="David"/>
     <option value="Mark"/>
  </datalist>

Получить более подробную информацию о теге datalist можно здесь: http://www.w3schools.com/tags/tag_datalist.asp

0 голосов
/ 04 апреля 2011

Вы можете использовать клавишу со стрелкой в ​​качестве фона поля ввода, используя css / использовать наложение над полем ввода с фоновым изображением стрелки и сделать его видимым в режиме наведения при помощи css или js

...