用于实现搜索引擎自动完成的小部件

Question

我正在整理一个搜索引擎。我需要一个文本字段(自动完成)和一个搜索按钮。(单击“搜索”按钮提交表单。)

有很多javascript自动完成解决方案(有些是在http://webtecker.com/2008/03/10/10-auto-complete-ajax-scripts列出的)，但我需要一个与搜索按钮协同工作的解决方案。

具体来说，我正在寻找一个javascript小部件，它模仿Firefox搜索栏提供的功能.当用户在文本字段中键入时，“自动完成”将在下拉列表中显示建议。如果用户按Enter (例如，不接触下拉列表)，则提交表单(好像单击了搜索按钮)，用户在文本字段中键入的是提交给表单的值。或者，如果用户从自动完成下拉(键盘或鼠标)中选择一个值，则文本字段的值被设置为自动完成选择，并且表单被提交(就像单击搜索按钮一样)。

我已经有了生成自动完成建议的服务器端后端代码。

Answer 1

如果您使用jQuery或者不介意使用它，这个自动完成插件就会这样工作，并且是相当可定制的。

编辑

您需要一个自动完成提示的数据源--这取决于您如何开发。让我们暂时假装你所有的搜索建议都是几个月的列表。你的表格会用这些建议搜索谷歌。

下面是提示页面的样子(在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>

当然，你的搜索端点不一定非得是谷歌--可以是任何其他搜索，包括你自己的搜索。