jQuery中使用Ajax实现文本输入框的自动完成功能
本文由发表于7年前 | Javascript | 暂无评论 |  被围观 12,883 views+

当我们使用搜索引擎时发现会有自动提示的功能,那么,它是怎么实现的呢?在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>';
	}
}
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/jquery-ajax-implementation-using-a-text-input-box-auto-complete-feature.html
关键字: , , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/14
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 二叉树的前序遍历、中序遍历和后序遍历及其算法 2011/5/19
2 java.util.concurrent整体结构图 2012/7/30
3 Eclipse的Javascript校验卡住的问题 2014/7/15
4 Hibernate继承映射策略之每棵类继承树一张表 2011/5/25
5 Java基础笔记 – 继承InputStream自定义一个简单的字节数组输入流 2011/10/22
6 Javascript笔记 – Javascript中的语言特性和数据类型 2012/5/22
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.