ajax实现输入提示效果

本文实例为大家分享了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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery ajax请求方式与提示用户正在处理请稍等

    初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面. 异步和同步: 同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是--浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必须等待当前请求返回数据.而使用异步方式请求,页面不会出现假死现象. 提升用户体验度: 当用户提交数据等待页面返回结果是需要时间的,有时这段等待时间比较长,为了提高用户体验度,我们通常会给出 "正在处理

  • 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码

    情景 如何在特定的请求上实现"ajaxStart"的效果? 首先,重写Ajax方法的代价太高,仍然可以利用jQuery自身的Ajax Events. Ajax触发的全局事件会像一个标准事件一样传播到所有DOM节点上.层级:jQuery Events > Ajax Events > 自定义Ajax事件. 实现 复制代码 代码如下: Wo = window.Wo || {}; Wo.ajax = { spinner : $([]) ,init : function() { va

  • ajax 自动完成下拉框 自动提示位置问题

    复制代码 代码如下: function divPosition(){                 var clx,cly;                 clx=event.clientX;                 cly = event.clientY;                 objouter.style.top    = clx+10;                 objouter.style.left    = cly+20;                  

  • asp+ajax仿google搜索提示效果代码

    对于更完整的代码可以参考,这个是支持数据库的版本.经过我们编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输

  • jquery+ajax+text文本框实现智能提示完整实例

    jquery+ajax+text文本框实现智能提示完整实例

    本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • Ajax带提示的验证表单实例

    Ajax带提示的验证表单实例

    本文实例讲述了Ajax带提示的验证表单.分享给大家供大家参考.具体如下: 这是一个常用的Ajax表单验证程序,实时提示你输入的字符是否符合要求,简洁明快,便于修改,这是用JavaScript实现的,没有掺杂其它的框架类代码,因此比较实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ajax-table-check-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • Ajax实现智能提示搜索功能

    Ajax实现智能提示搜索功能

    一.效果图: 二.实现过程: 思路: 三.部分代码: html: <div id="searchbox"> <div><input type="text" id="txtTitle" /></div> <div id="btnSelect"><a href="javascript:;">Google</a></div&

  • jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

    query formValidator插件非常好用,但是有一个严重的Bug,在使用ajax验证的时候,如果输入框的内容已经存在,把鼠标放到输入框,不做任何修改再离开,则会提示错误, 这是这个插件犯的一个很愚蠢的错误 复制代码 代码如下: oneIsValid: function(id, index) { var returnObj = new Object(); returnObj.id = id; returnObj.ajax = -1; returnObj.errormsg = ""

  • jquery实现ajax加载超时提示的方法

    本文实例讲述了jquery实现ajax加载超时提示的方法.分享给大家供大家参考,具体如下: index.php <!doctype html> <html> <head> <meta charset="utf-8"/> <title>加载超时</title> <script type="text/javascript" src="http://lib.sinaapp.com/js

随机推荐