виджет для реализации автозаполнения для поисковой системы

Собираю поисковую систему. Мне нужно текстовое поле (с автозаполнением) и кнопка поиска. (Нажатие кнопки «Поиск» отправляет форму.)

Существует множество решений для автозаполнения javascript (некоторые из них перечислены на странице http://webtecker.com/2008/03/10/10-auto-complete-ajax-scripts), но мне нужен тот, который работает в тандеме с кнопкой поиска.

В частности, я ищу виджет javascript, который имитирует функциональность, предоставляемую панелью поиска Firefox ... Когда пользователь вводит текст в текстовое поле, автозаполнение представляет предложения в раскрывающемся списке. Если пользователь нажимает Enter (например, не касаясь раскрывающегося списка), форма отправляется (как если бы была нажата кнопка «Поиск»), и то, что пользователь ввел в текстовое поле, является значением, которое отправляется в форму. В качестве альтернативы, если пользователь выбирает значение из раскрывающегося списка автозаполнения (с помощью клавиатуры или мыши), тогда значение текстового поля устанавливается на выбор автозаполнения, и форма отправляется (как если бы была нажата кнопка поиска).

У меня уже есть внутренний код на стороне сервера, который генерирует предложения автозаполнения.


javascript search autocomplete
person Mike W    schedule 07.10.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

РЕДАКТИРОВАТЬ

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

Вот как может выглядеть страница подсказки (в PHP)

hint.php

<?php

$query = $_GET['q'];

$monthList = array(
    'January'
  , 'February'
  , 'March'
  , 'April'
  , 'May'
  , 'June'
  , 'July'
  , 'August'
  , 'September'
  , 'October'
  , 'November'
  , 'December'
);

if ( preg_match_all( "/^" . preg_quote( $query ) . ".*$/im", implode( "\n", $monthList ), $matches ) )
{
  echo implode( "\n", $matches[0] );
}

Итак, теперь нам просто нужно подключить поле автозаполнения к этой странице в качестве источника предложений.

<html>
<head>
  <title>Test Page</title>
  <link rel="stylesheet" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script type="text/javascript">
        $(function()
    {
      $('#search').autocomplete( 'test.php', {} ).result( function( data, value )
      {
        $(this)[0].form.submit();
      } );            
    });
  </script>
</head>

<body>

<form action="http://www.google.com/search">

<input type="text" id="search" name="q"/><input type="submit" value="Search">

</form>

</body>
</html>

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

person Peter Bailey    schedule 07.10.2009
comment
Действительно? Я не видел никакого способа заставить плагин автозаполнения JQuery работать в тандеме с кнопкой поиска. Вы можете привести мне пример? - person Mike W; 08.10.2009
comment
Это вам решать. Я изменю свой ответ на примере. - person Peter Bailey; 08.10.2009
comment
Тем не менее, мой вопрос заключался в том, как заставить автозаполнение взаимодействовать как с текстовым полем, так и с кнопкой поиска. В вашем примере не рассматривается кнопка поиска, поэтому он не очень полезен. - person Mike W; 09.10.2009
comment
Не могли бы вы лучше объяснить, что вы подразумеваете под взаимодействием? Потому что сейчас я не уверен, что понимаю ваше поведение. - person Peter Bailey; 09.10.2009
comment
О, вы имеете в виду функцию автоматической отправки при выборе? Конечно, ты можешь это сделать. Это заставляет меня задуматься, не удосужились ли вы вообще читать документацию по плагину автозаполнения. Ответ изменен, чтобы включить это. - person Peter Bailey; 09.10.2009