当我们使用搜索引擎时发现会有自动提示的功能,那么,它是怎么实现的呢?在jQuery中结合Ajax可以很容易实现自动完成的功能。
下面就在jQuery中使用Ajax提交post请求,让服务器端返回自动完成的数据显示在相应的div中。
编写html文件
主要是一个输入框,一个隐藏的div和提交按钮:
编写CSS样式
为了让显示效果更好看,编写如下CSS样式:
jQuery代码
服务器端的响应程序
为了简单的验证可以编写以下php代码:
echo '
echo '
echo '
echo '
也可以让服务器程序查询数据库,从相应的数据库中选择匹配的数据返回给客户端:
$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 '
}
}