65.9K
CodeProject 正在变化。 阅读更多。
Home

带 JavaScript 和 PHP 的 AJAX 自动完成控件

Mihaly Sogorka
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.75/5 (3投票s)

2012 年 10 月 27 日

CPOL

4分钟阅读

viewsIcon

45749

downloadIcon

1662

用纯 JavaScript 编写的 Web 开发自动完成控件。

下载 autocomplete.zip 

介绍 

如果您正在寻找一个易于集成到 Web 应用程序中的自动完成 Web 控件，那么您来对地方了！这个工具轻量级但仍然有效，并且非常易于通过 CSS 类进行自定义。您可以将其连接到 HTML <input> 标签，并在几分钟内设置好。它可以通过 AJAX 回调的 PHP 站点接收任何类型的数据集，因此在搜索过程中不会发生回发（也可以调用 .aspx 或其他类型的动态页面）。但让我们看一些图片而不是文字： 

背景 

当您开始搜索类似的自动完成控件时，首先会发现的是 jQuery UI Autocomplete Widget。在花了好几天的时间理解 jQuery 的解决方案和程序逻辑后，我放弃了，决定自己编写一个自动完成控件。我不想责怪 jQuery，只是觉得他们的代码很难读懂。

所以，这个控件是用纯 JavaScript 编写的，因此您不需要任何像 jQuery 这样的外部资源。

使用代码

使用和设置控件非常简单。本文不会深入分析这个工具是如何工作的以及核心 JavaScript 文件背后发生了什么。它只会向您展示如何根据您的需求实现和自定义它（如果您对脚本的工作原理感兴趣，请给我发邮件）。 本文附加了一个完整的示例供您测试。您只需要在您的操作系统上运行一个 Appache 服务器（我建议 Windows 用户使用 XAMPP ）。 

在 index.php 中，我们将添加一个 <input> 标签，并将其与 search.js 中包含的初始化脚本连接起来。onkeyup 事件将调用稍后将描述的 InitAutoComplete() 函数。我们将 event 和 control_id 参数传递给该函数。这些是必需的值，没有这些参数，控件将无法初始化。但现在，这是完整的 index.php 代码块（很简单，没错吧！）：  

<!doctype html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Autocomplete example</title>
<link href="css/search.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java/autocomplete.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</head>

<body>
  <div>
  <form>
    <div id="searchDiv">
      <input id="search" onkeyup="InitAutoComplete(event, 'search');" autocomplete="off" size="28" />
    </div>
  </form>
  </div>
</body>

</html>

初始化函数在 search.js 文件中声明。它已尽可能简化，适合那些用过与 C# 类似的编程语言的程序员。它是完全面向对象且结构化的，因此阅读代码不会很困难（如果您将其与 jQuery 的概念进行比较，您会发现这是一个相当友好的代码）。 任何初始化步骤都应该在这里完成。 这些值可以由您指定。 

  • Source：这是将发送 HttpRequest 的动态页面，并将从那里接收 HttpResponse（可以是 PHP、ASPX，随便什么……）。响应应格式化为 JSON 响应数组。 
  • QueryString： 通常是“q”或  “term”，但这也可以由您决定。在您的 PHP 页面上，您需要从 URL 中请求此参数及其值（PHP 示例： $_GET['q']）。 
  • Delay：通过此属性，您可以指定发送到服务器的按键之间的延迟（以毫秒为单位）。 
  • MinLength：  此属性将定义搜索开始的字符数。
  • SearchCaption：您可以指定请求正在进行时显示的标题文本。 
  • CssClassBox：您可以在此处分配一个 CSS 类，该类将应用于搜索框。 
  • CssClassLabel：您可以在此处分配一个 CSS 类，该类将应用于搜索结果列表的标题。 
  • CssClassProgress：您可以在此处分配一个 CSS 类，该类将应用于搜索框，当请求正在进行且搜索处于“忙碌”模式时。 
  • CssClassSelected: 您可以在此处分配一个 CSS 类，该类将应用于选定的搜索结果元素。 
这是 search.js 文件中定义的函数，它将初始化 AutoComplete 控件并进行配置（仍然很简单，不是吗？）

function InitAutoComplete(event, input) {
  var myAutoComplete = new AutoComplete(input);
  myAutoComplete.Source = "search.php";
  myAutoComplete.QueryString = "q";
  myAutoComplete.Delay = 300;
  myAutoComplete.MinLength = 1;  //start search after 1 character
  myAutoComplete.SearchCaption = "Search...";
  
  //look and feel (if you don't set these options, it will use the built in default css classes which are quiet nice)
  myAutoComplete.CssClassBox = "searchBox";  //these classes are defined in search.css file
  myAutoComplete.CssClassLabel = "searchLabel";
  myAutoComplete.CssClassProgress = "searchProgress";
  myAutoComplete.CssClassSelected = "searchSelected";
  
  //fire
  myAutoComplete.Execute(event);
};

就是这样！您只需要自定义自己的 php/aspx 回调页面，它将响应此 ajax 调用。显然，编写服务器端代码、您想要实现的目标以及您期望从服务器获得的结果有很多可能性。只需记住您需要以 JSON 数组响应请求（对于 PHP，有一个名为 json_encode() 的函数可以实现此目的）。这是您如何使用 search.php 进行响应（回复）的一个工作示例： 

<?php
//fill the array with test resultset
//you can implement your own query here. E.g: fetching data from some sql database, like mySQL.
$result = array();
array_push($result, json_encode(array("seriesname" => utf8_encode("Stargate Atlantis"),
                                      "image" => utf8_encode("<img width=\"195\" height=\"40\" src=\"http://thetvdb.com/banners/_cache/graphical/70851-g12.jpg\">"))));
array_push($result, json_encode(array("seriesname" => utf8_encode("Stargate SG-1"),
                                      "image" => utf8_encode("<img width=\"195\" height=\"40\" src=\"http://thetvdb.com/banners/_cache/graphical/72449-g6.jpg\">"))));
array_push($result, json_encode(array("seriesname" => utf8_encode("Stargate Univers"),
                                      "image" => utf8_encode("<img width=\"195\" height=\"40\" src=\"http://thetvdb.com/banners/_cache/graphical/83237-g4.jpg\">"))));
array_push($result, json_encode(array("seriesname" => utf8_encode("Stargate Infinity"),
                                      "image" => utf8_encode("<img width=\"195\" height=\"40\" src=\"http://thetvdb.com/banners/_cache/graphical/11416-g.jpg\">"))));

echo implode(",", $result);
?>

安装   

要实现此控件，您需要以下文件： 

  • ./css/search.css （这将定义您的搜索结果框、结果标题和进度指示器的外观和感觉） 
  • ./java/autocomplete.js （这是核心，如果您是 JavaScript 程序员，可以覆盖和扩展代码以满足您的需求） 
  • ./java/search.js （这将初始化控件，并且应该与其余代码块分开） 
您需要将 InitAutoComplete() 方法与 onkeyup 事件连接起来。 

<input id="search" onkeyup="InitAutoComplete(event, 'search');" />

兴趣点 

开发这个控件对我来说是一次有益的 实践，让我学习了 JavaScript 语言。思考方式不同非常有挑战性，因为用 C# 编写某些应用程序与用 JavaScript 编写非常不同。事情的运作方式真的与您的预期不同（个人 ملاحظة：先学习 JavaScript，然后再学习 C#）。 

请记住：保持简单！ 

历史 

版本 1.0

© . All rights reserved.