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

来源：互联网发布：淘宝资金冻结15天规定编辑：程序博客网时间：2024/05/01 01:46

当我们使用搜索引擎时发现会有自动提示的功能，那么，它是怎么实现的呢？在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