本文实例为大家分享了ajax实现输入提示效果的具体代码，供大家参考，具体内容如下
网站主页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{
margin:0px auto;
padding:0px;
}
.l{
height:50px;
width:198px;
border-bottom:1px solid black;
text-align: center;
line-height:40px;
vertical-align: middle;
}
</style> <script src="../wenjian/jquery-2.2.3.min.js"></script></head><body><div style="height: 50px;
width: 200px"><input type="text" id="name" style="width: 198px;
height: 48px;
"></div><div id="list" style="height: 500px;
width: 200px;
border: 1px solid black"><!--<div id="l">zhongguo</div>--></div></body></html><script>$("#name").keyup(function () {
var n = $("#name").val();
if (n != ""){
$.ajax({
url:'ltchuli.php', data:{
n:n}
, type:'post',// dataType:'text', dataType:'json', success:function (data) {
//text写法// var s = data.split("|");
// var str = "";
// for (var i=0;
i<s.length;
i++)// {
// str = str + "<div class='l'>" +s[i] +"</div>";
// }
// $("#list").html(str);
//json写法 for (var i in data){
$("#list").append("<div class='l'>" +data[i] +"</div>");
}
}
}
);
}
else {
$("#list").html("");
}
}
)</script>
处理页面
<?php/** * Created by fcc * User: Administrator * Date: 2017/10/30 * Time: 9:52 */$n = $_POST['n'];
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$obj = "select region_name from region WHERE region_name LIKE '%{
$n}
%' ";
$data = $db->Query($obj);
//echo $data;
echo json_encode($data);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- jquery ajax请求方式与提示用户正在处理请稍等
- php+ajax做仿百度搜索下拉自动提示框(有实例)
- ajax 自动完成下拉框 自动提示位置问题
- asp+ajax仿google搜索提示效果代码
- jquery+ajax+text文本框实现智能提示完整实例
- jquery实现ajax加载超时提示的方法
- 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
- Ajax实现智能提示搜索功能
- Ajax带提示的验证表单实例
- jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
