jQuery中使用Ajax实现文本输入框的自动完成功能

当我们使用搜索引擎时发现会有自动提示的功能，那么，它是怎么实现的呢？在jQuery中结合Ajax可以很容易实现自动完成的功能。

下面就在jQuery中使用Ajax提交post请求，让服务器端返回自动完成的数据显示在相应的div中。

编写html文件

主要是一个输入框，一个隐藏的div和提交按钮：

输入关键词：

编写CSS样式

为了让显示效果更好看，编写如下CSS样式：

jQuery代码

服务器端的响应程序

为了简单的验证可以编写以下php代码：

echo '

arthinking

';
echo '

ajax

';
echo '

autoComplete

';
echo '

abc

';

也可以让服务器程序查询数据库，从相应的数据库中选择匹配的数据返回给客户端：

$keywords = $_POST['keywords'];
$conn = mysql_connect("localhost", "root", "123") or die ("Please check your server connection.");
mysql_select_db("autocomplete");
$query = "select keywords from index_list where keywords like '$keywords'";
$results = mysql_query($query) or die(mysql_error());
if($results) {
//从结果集中取得一行作为关联数组
while ($row = mysql_fetch_array($results)) {
//extract() 函数从数组中把变量导入到当前的符号表中
extract($row);
echo '

' . $keywords. '

';
}
}