Autocomplet() выбирается Li

Question

Прошло 3 дня, пытаясь в полной мере понять, почему я не могу сделать эту функцию скрипта для навигации по клавиатуре.

Поиск, отображение и замена работают нормально, но когда я пытаюсь просмотреть список и нажмите Enter, чтобы выбрать один из вариантов, это не так.

Форма

<form action="/busqueda.php" method="get" autocomplete="off"> 
    <input name="dataa" class="boxbuscar" type="text" id="despliega" onKeyUp="autocomplet()"> 
    <input src="/img/btn-buscar.png" type="image" class="lupa"> 
<ul id="lista"></ul> 

РНР

<?php 
function connect() 
{ 
return new PDO('mysql:host=localhost;dbname=dbname', 'dbuser', 'dbuserpw', array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION 
)); 
} 
$pdo = connect(); 
$keyword = '%' . $_POST['keyword'] . '%'; 
$sql = "SELECT * FROM tbl_productos WHERE nombre LIKE (:keyword) ORDER BY nombre ASC LIMIT 0, 15"; 
$query = $pdo->prepare($sql); 
$query->bindParam(':keyword', $keyword, DO ::PARAM_STR); 
$query->execute(); 
$list = $query->fetchAll(); 
foreach($list as $rs) 
{ 

// put in bold the written text 

$reemplazador = str_replace($_POST['keyword'], '<b>' . $_POST['keyword'] . '</b>', $rs['nombre']); 

// add new option 

echo '<li onclick="set_item(\'' . str_replace("'", "\'", $rs['nombre']) . '\')">' . $reemplazador . '</li>'; 
} 
?> 

и JS

function autocomplet() { 
var min_length = 2; // min caracters to display the autocomplete 
var keyword = $('#despliega').val(); 
if (keyword.length >= min_length) { 
    $.ajax({ 
     url: 'ajax_refresh.php', 
     type: 'POST', 
     data: { 
      keyword: keyword 
     }, 
     success: function(data) { 
      $('#lista').show(); 
      $('#lista').html(data); 
     } 
    }); 
} else { 
    $('#lista').hide(); 
} 
} 
// set_item : this function will be executed when we select an item function set_item(item) { 
// change input value 
$('#despliega').val(item); 
// hide proposition list  
$('#lista').hide(); 
} 

Любые идеи?

Обновление: Короткий ответ: Это лучший вариант a link

Answer 1

Клавиатура навигации списка не работает из в коробке, как вы этого хотите. Вам нужно прослушать события клавиатуры в списке и вызвать соответствующие действия. Попробуйте что-то вдоль линий:

$(document).on('keyup', function(e) { 
    if (e.which === 38) { 
    // Arrow Up is pressed 
    } 
    if (e.which === 40) { 
    // Arrow Down is pressed 
    } 
    if (e.which === 13) { 
    // Enter is pressed 
    } 
}) 

Тогда вы хотите иметь переменную, давайте назовем его current, который хранит в себе выделенный элемент списка. Вы будете менять current при нажатии стрелки вверх/вниз. Вам также нужно добавить некоторый стиль в текущий элемент списка, чтобы указать, какой из них выделен для пользователя. При нажатии на кнопку вы вызываете set_item(current) - передаете текущий элемент списка в set_item.

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

Вот документы для JQuery keyup event. Также проверьте tutorial on JavaScript keyboard events.

Что все сказано, вам может быть лучше не изобретать колесо и использовать готовый виджет автозаполнения. Здесь JQuery UI Autocomplete, здесь Awesomplete (найдите «пример Ajax» на странице, чтобы увидеть пример реализации с сервером backend).

P.S. Вот несколько советов о вашем коде:

• не отображать javascript на сервере. Лучший способ получить список с сервера - получить объект JSON, перечисляющий все элементы, а затем создать список из него. Если вам нужно вернуть HTML, не помещайте в него обратные вызовы javascript. Так что просто верните <li data-item='1'>One</li>, а затем используйте $('#list li').on('click', ..., чтобы установить слушателя для всех предметов. Таким образом, вы сохраняете javascript и php как можно более раздельными.

• использование английского языка для обозначения переменных, функций и т. Д.В один прекрасный день вы будете показывать свой код кому-то, а использование имен переменных на испанском языке очень затруднит чтение вашего кода не испанским языком.

• научиться использовать отступы. Правильный отступ делает гораздо проще читать ваш код и понимать, что происходит. Вот javascript style guide. Вероятно, вы можете найти то же самое и для PHP. Есть также онлайн-инструменты, которые могут сделать это для вас, попробуйте this one. Я рекомендую правильно стилизовать свой код, прежде чем размещать его в вопросе, так что сообщество будет легче читать.

Answer 2

Enter не работает автоматически, вы должны связать вашу функцию, чтобы ввести ключевое событие