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

时间:2009-10-07 18:37:04

标签: javascript search autocomplete

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

有许多javascript自动完成解决方案(有些列在http://webtecker.com/2008/03/10/10-auto-complete-ajax-scripts),但我需要一个与“搜索”按钮配合使用的解决方案。

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

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

1 个答案:

答案 0 :(得分:1)

如果你使用jQuery或者不介意使用它,那么这个autocomplete plugin就是这样的,可以自定义。

修改

您需要自动完成提示的数据来源 - 您如何开发这些取决于您自己。让我们暂时假装您的整个搜索建议世界是一个月的列表。您的表单会在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 - 可以是任何其他搜索,包括您自己的搜索。