прокрутка неупорядоченного списка с помощью горячих клавиш

Я пытаюсь создать неупорядоченный список я HTML, в котором пользователь может «выбрать» в ListItems (в основном они просто скопировали в DIV при нажатии на)прокрутка неупорядоченного списка с помощью горячих клавиш

Хотя это достаточно легко достичь, пользователь должен также нажать клавишу на своей клавиатуре, чтобы список прокручивался до первого списка, первая буква которого равна букве нажатой клавиши.

Изображение для справки:

enter image description here

Давайте представим, что есть 200+ Элементам списка в приведенном выше списке, и я хочу, чтобы «искать»/перейти к самолета, я ударил А на мой клавиатура и список прокрутки до первого экземпляра в списке, начинающемся с «a»

Мне было интересно, если есть какие-либо jQuery-плагины, которые делают именно это? :-) Просматривал, но без всякой удачи. Если нет, я, конечно, должен сам написать это, я просто не уверен, как фактически захватить письмо, которое пользователь нажимает.

Любой намек на то, как его создать, очень ценится! :-)

Заранее спасибо.

источник

2012-05-08 bomortensen

звучит, как вы хотите [JQuery UI автозаполнения] (http://jqueryui.com/demos/autocomplete/) –

Пожалуйста, покажите нам HTML для вашего прокруткой списка. Нетрудно захватить ключевые события и действовать на них, но нам нужно посмотреть, как выглядит ваш HTML. – jfriend00

Если у вас есть 'tank',' trolley' и 'racecar', что должно произойти, когда набирается' tr'? –

Я написал свой код, чтобы переопределить поведение браузера по умолчанию для <select multiple="multiple">. Я пришел к выводу, что это плохая идея попробовать это, потому что каждый браузер рассматривает входные данные и код jQuery.

Я предлагаю г-ну Мортенсену найти виджет пользовательского интерфейса или замену, например флажки внутри прокручиваемого div, которые обеспечат более предсказуемое поведение, а затем примените мою функциональность кода к этому выбору. Есть различные варианты, я застрял с общим <select> кода:

Непоследовательность: Я был удивлен Opera работал так же, как я хотел. IE 7 просто проигнорировал мой код. Хром: Когда клавиша нажата, чтобы выбрать элемент из вида, он будет прокручиваться вверх, но не вниз. Непонятные. Firefox: У меня не может быть event.preventDefault() работающих. Поэтому весь мой код игнорируется.

http://jsfiddle.net/rtLF2/

<html> 
    <head> 
    <style type="text/css"> 

    </style> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     var indices = {}; 
     var count = 1; 

     // build a dictionary matching first letters to indices of where 
     // they were found 
     $("#mylist option").each(function() { 
      var letter = $(this).text().charAt(0).toLowerCase(); 
      if(!indices[letter]) { 
      indices[letter] = []; 
      } 
      indices[letter].push(count); 
      count++; 
     }); 

     var lastletter = ""; 
     var lastindex = -1; 

     $("#mylist").on('keypress', function(event) { 
      event.preventDefault(); 
      var pressed = String.fromCharCode(event.keyCode).toLowerCase(); 
      if(pressed == lastletter) { 
      lastindex == indices[lastletter].length - 1 ? lastindex = 0 : lastindex++; 
      } 
      else { 
      lastletter = pressed; 
      lastindex = 0; 
      } 

      if(indices[lastletter]) { 
      var target = indices[lastletter][lastindex]; 
      $("#mylist option:selected").each(function() { 
       $(this).removeAttr("selected"); 
      }); 
      $("#mylist option:nth-child(" + target + ")").attr("selected", "selected"); 
      } 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <select id="mylist" multiple="multiple" size="5"> 
     <option value="1">Tank</option> 
     <option value="2">APC</option> 
     <option>Mini tricycle</option> 
     <option>Bike</option> 
     <option>Megatank</option> 
     <option>Brawler</option> 
     <option>Trailer</option> 
     <option>Md Tank</option> 
     <option>Armored van</option> 
     <option>War Machine</option> 
    </select> 
    </body> 
</html>

источник

2012-05-09 01:17:18

Привет, Мия, большое спасибо! Это просто потрясающий материал прямо сейчас :-) Я провел последние несколько дней, поговорив с менеджером проекта об этом, и похоже, что они хотят просто с автозаполнением, в конце концов .. Вздох! :/Я определенно собираюсь сохранить ваш код для последующего использования! Еще раз спасибо :) – bomortensen

@bomortensen Я думаю, вам повезло, что вы можете использовать простой старый автозаполнение, потому что, когда я говорю, что мой код не работает одинаково в разных браузерах, я говорю, что это ошибка: | Ну, спасибо за принятие и взятие меня более 1000 репа :) –

прокрутка неупорядоченного списка с помощью горячих клавиш

ответ

Смежные вопросы