ajax输入提示php,jQuery ajax与php交互 输入框自动提示功能

本文示例ajax与php交互实现输入框自动提示功能。使用jQuery的Ajax技术可以很容易实现输入口自动提示的功能。

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

一、html表单部分

输入关键词：

二、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;

}

三、jQuery代码

$(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;

});

});

四、php响应ajax请求返回数据

$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. '';

}

}