Question

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

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

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

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

Answer 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 - 可以是任何其他搜索，包括您自己的搜索。

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

1 个答案: