Блог

Главная - Вопросы по программированию - автозаполнение в стиле Google с помощью клавиш со стрелками

автозаполнение в стиле Google с помощью клавиш со стрелками

#javascript #ajax #arrow-keys

#javascript #ajax #клавиши со стрелками

Вопрос:

я создал простую поисковую систему, которая отображает результаты базы данных mysql, используя функцию php «LIKE» (код ниже). все работает нормально. я просто хотел бы сделать так, чтобы, когда пользователь начинает печатать, он / она мог использовать клавиши со стрелками для прокрутки вниз и нажатия enter для элемента, точно такого же, как Google. Спасибо. мой код:

HTML:

 <input type="text" name='search' id="searchbooks" onkeyup='getbooks(this.value);'       value="search" onblur="setTimeout('removedrop()', 80);">

<div id='drop'></div>

JAVASCRIPT:

 function getbooks(value){
    if (value!=""){



    $.post('getbooks.php', {book: value},
        function (data) {
            $('#drop').html(data);
            doCSS();                
        });

        }
        else {

        $('#drop').html("");
        undoCSS();
        }

}

getbooks.php файл:

 <?php
include 'connect.php';

$book=mysql_real_escape_string(addslashes($_POST['book']));

$result=mysql_query("SELECT * FROM searchengine WHERE title LIKE '$book%'");


while ($row=mysql_fetch_assoc($result)){
$title=$row['title'];
$id=$row['id'];


echo "<div id='link'><a href='index.php?id=$id' id='words'>". $row['title'] ."</a></div>";

}
?>

Ответ №1:

Как насчет использования плагина автозаполнения jQuery? Это сделано именно для этого варианта использования.

введите описание изображения здесь

Комментарии:

1. Um. Я не уверен, что моя вторая половинка думает по этому поводу :P

2. @matt я только что просмотрел эти файлы. это кажется очень сложным для такой небольшой настройки. есть ли другой способ сделать это, используя код, который у меня уже есть

3. Мои извинения, я на самом деле ссылался на действительно старую версию. Я обновил ссылку (и изображение) в своем ответе. Надеюсь, вы обнаружите, что обновленное автозаполнение намного проще в использовании.

4. @matt есть ли способ сделать выпадающие элементы ссылками? а также способ удаления названия объекта наведения курсора мыши из текстового поля, когда пользователь прокручивает его.