Я пытался сделать следующее:
1) получить нажатие клавиш (только 0-9, az и пробел) и сохранить это внутри div 2) создать список LI (вы можете использоватьdiv с a-elements, это тоже хорошо) 3) найти элементы LI с сохраняемым текстом 4) добавить стрелки вверх / вправо вниз / влево, чтобы получить следующий / предыдущий элемент в списке
А покасохраняет все элементы в списке, вы можете скрыть их, если хотите.Это просто иллюстрация.
// EDIT:
Вот начальная настройка: http://www.pendemo.nl/keyinputtest.html В Firefox тело не выбирается автоматически, поэтому вам нужно щелкнуть тело/ веб-страницу еще раз, прежде чем второй вход обнаруживается.В Chrome он обнаруживает нажатие клавиш после друг друга.
// EDIT2:
Работа в Firefox.Текст теперь сохраняется внутри div (вы можете ввести нужную строку и увидеть, как она помещается в тело).
// EDIT3:
Добавлен список UL с некоторыми элементами,ввод некоторого текста отфильтрует этот список с элементами, соответствующими набранной строке.
// EDIT4:
Для поиска используются только az и пробел.Все еще ищу способ найти клавишу возврата.Так как Chrome добавляет «history.go-1» по умолчанию.Firefox, однако, замечает клавишу возврата.event.preventDefault () ничего не меняет в Chrome.
// EDIT5:
Добавлена стрелка вверх + вправо для выбора следующего массива, а влево + вниз для выбора предыдущего элемента.
// EDIT6:
При использовании клавиши ввода текущее значение является предупреждением.Конечно, сценарии останавливается после предупреждения.Но, как вы можете видеть, значение доступно для вас.
Вот код, который я придумал до сих пор:
var typed_string = '';
$(document).ready(function() { $('#typedtext').select(); });
$(document).bind('keypress', function(event) {
event.preventDefault();
if((event.which > 47 && event.which < 58) || (event.which > 96 && event.which < 123) || event.which == 32) {
typed_string = typed_string + String.fromCharCode(event.which);
$('#typedtext').html(typed_string);
$('#testlist li').css('background-color', '#ffffff');
$('#testlist li:contains('+typed_string+')').css('background-color', 'green').first().addClass('selected').css('background-color', 'red');
$('#typedtext').select();
}
if(event.which == 13) {
alert('Selected item: ' + $('.selected').html());
$('#typedtext').select();
}
});
$(document).keyup(function(event) {
event.preventDefault();
if(event.which == 38 || event.which == 37) {
$('#testlist li').css('background-color', '#ffffff');
$('#testlist li:contains('+typed_string+')').css('background-color', 'green');
$('.selected').removeClass('selected').prev().css('background-color', 'red').addClass('selected');
}
if(event.which == 39 || event.which == 40) {
$('#testlist li').css('background-color', '#ffffff');
$('#testlist li:contains('+typed_string+')').css('background-color', 'green');
$('.selected').removeClass('selected').next().css('background-color', 'red').addClass('selected');
}
});
function clearInput() {
typed_string = '';
}
И я использую этот HTML:
Press any key to save text.<br /><br />
<div id="typedtext" style="border: 1px solid #09F; padding: 5px;"></div>
<br /><br />
Let's test to filter some items from the li. (use up/down or left/right keys to select next item)
<ul id="testlist">
<li>item</li>
<li>test</li>
<li>more test</li>
<li>another item</li>
<li>test item</li>
<li>more item</li>
<li>foo</li>
<li>foo bar</li>
<li>bar</li>
<li>more foo</li>
</ul>
Я думаю, что вам достаточно легко изменить HTML-код в соответствии с вашими потребностями.