在当今互联网应用开发中，自动完成功能已经成为提升用户体验的重要组件之一。它能够快速地根据用户输入提示可能的选项，从而减少用户的输入工作量，提升操作效率。本文将介绍如何实现一个轻量级、易于定制的自动完成控件，该控件使用纯JavaScript编写，不依赖于任何外部库，如jQuery。
在开始之前，先了解一下背景。当在互联网上搜索自动完成控件时，可能首先会找到jQuery UI Autocomplete Widget。虽然它功能强大，但阅读和理解其代码对于初学者来说可能比较困难。因此，作者决定编写一个自己的自动完成控件，使用纯JavaScript实现，以简化开发过程。
使用和设置这个控件非常简单。本文不会深入分析工具的工作原理和核心JavaScript文件背后的逻辑，只会展示如何根据需求实现和定制它。如果对脚本的工作方式感兴趣，可以通过电子邮件联系作者获取更多信息。本文附带了一个完整的工作示例，可以通过它进行测试。需要的只是一个运行在操作系统上的Apache服务器（对于Windows用户，作者建议使用XAMPP）。
在index.php文件中，将添加一个input标签，并将其与search.js文件中包含的初始化脚本连接起来。onkeyup事件将调用InitAutoComplete()函数，该函数稍后将进行描述。将事件和control_id参数传递给该函数。这些是必需的值，没有这些参数，控件将无法初始化。以下是完整的index.php代码块：
<!doctype html>
<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>
InitAutoComplete()函数在search.js文件中声明。它尽可能简化，以便那些接受过类似C#编程语言训练的程序员能够轻松阅读。它是完全面向对象的，结构清晰，易于理解。初始化步骤应该在这里完成。这些值可以由指定。
以下是search.js文件中定义的函数，它将初始化自动完成控件并为其设置参数（仍然简单，不是吗？）：
function InitAutoComplete(event, input) {
var myAutoComplete = new AutoComplete(input);
myAutoComplete.Source = "search.php";
myAutoComplete.QueryString = "q";
myAutoComplete.Delay = 300;
myAutoComplete.MinLength = 1;
myAutoComplete.SearchCaption = "Search...";
myAutoComplete.CssClassBox = "searchBox";
myAutoComplete.CssClassLabel = "searchLabel";
myAutoComplete.CssClassProgress = "searchProgress";
myAutoComplete.CssClassSelected = "searchSelected";
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("")
)));
array_push($result, json_encode(array(
"seriesname" => utf8_encode("Stargate SG-1"),
"image" => utf8_encode("")
)));
array_push($result, json_encode(array(
"seriesname" => utf8_encode("Stargate Univers"),
"image" => utf8_encode("")
)));
array_push($result, json_encode(array(
"seriesname" => utf8_encode("Stargate Infinity"),
"image" => utf8_encode("")
)));
echo implode(",", $result);
?>
要实现这个控件，需要以下文件：
还需要将InitAutoComplete()方法与onkeyup事件连接起来：
<input id="search" onkeyup="InitAutoComplete(event, 'search');" />