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

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

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

编写html文件

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

<form id="register" method="post" action="">
	<span class="tips">输入关键词：</span>
	<input type="text" name="keywords" class="keywords" />
	<div class="list_box">
		<div class="keywords_list"></div>
	</div>
	<input type="submit" id="submit" />
</form>

编写CSS样式

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

<style type="text/css">
.tips {
font-size:12px;}
.list_box {
position:relative;
width:200px;
margin-left:80px;
background:#f3f3f3;
border:1px solid #CCC;
}
.keywords_list {
margin:0;
padding:0;
list-style:none;
}
.hover {
background:#33CCFF;
color:#333333;
}
</style>

jQuery代码

<script type="text/javascript">
$(document).ready(function() {
	$('.list_box').hide();
	$('.keywords').keyup(function(){
		var keywords = $('keywords').val();
		var data = 'keywords=' + keywords;
		$.ajax({
			type:"POST",
			url:"autocomplete.php",
			data:data,
			success:function(html) {
				$('.list_box').show();
				$('.keywords_list').html(html);
				$('li').hover(function(){
					$(this).addClass('hover');
				},function(){
					$(this).removeClass('hover');
				});
				$('li').click(function(){
					$('.keywords').val($(this).text());
					$('.list_box').hide();
				});
			}
		});
		return false;
	});
});	
</script>

服务器端的响应程序

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

echo '<li>arthinking</li>';
echo '<li>ajax</li>';
echo '<li>autoComplete</li>';
echo '<li>abc</li>';

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

$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 '<li>' . $keywords. '</li>';
	}
}

本文链接： http://www.itzhai.com/jquery-ajax-implementation-using-a-text-input-box-auto-complete-feature.html