详解ajax实现输入提示效果示例-php教程-PHP中文网

首页

后端开发

php教程

详解ajax实现输入提示效果示例

Dec 25, 2017 am 09:30 AM

ajax 提示输入

js可以实现页面输入提示效果，ajax也可以，本文主要为大家详细介绍了ajax实现输入提示效果的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

网站主页

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;style&gt;
    *{
      margin:0px auto;
      padding:0px;
    }
    .l{
      height:50px;
      width:198px;
      border-bottom:1px solid black;
      text-align: center;
      line-height:40px;
      vertical-align: middle;
    }
  &lt;/style&gt;
  &lt;script src=&quot;../wenjian/jquery-2.2.3.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p style=&quot;height: 50px;width: 200px&quot;&gt;&lt;input type=&quot;text&quot; id=&quot;name&quot; style=&quot;width: 198px;height: 48px;&quot;&gt;&lt;/p&gt;
&lt;p id=&quot;list&quot; style=&quot;height: 500px;width: 200px;border: 1px solid black&quot;&gt;
&lt;!--&lt;p id=&quot;l&quot;&gt;zhongguo&lt;/p&gt;--&gt;
&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;script&gt;
$(&quot;#name&quot;).keyup(function () {
  var n = $(&quot;#name&quot;).val();
  if (n != &quot;&quot;){
  $.ajax({
    url:&#39;ltchuli.php&#39;,
    data:{n:n},
    type:&#39;post&#39;,
//    dataType:&#39;text&#39;,
    dataType:&#39;json&#39;,
    success:function (data) {
//text写法
//     var s = data.split(&quot;|&quot;);
//     var str = &quot;&quot;;
//     for (var i=0;i&lt;s.length;i++)
//     {
//       str = str + &quot;&lt;p class=&#39;l&#39;&gt;&quot; +s[i] +&quot;&lt;/p&gt;&quot;;
//     }
//     $(&quot;#list&quot;).html(str);
//json写法

      for (var i in data){
        $(&quot;#list&quot;).append(&quot;&lt;p class=&#39;l&#39;&gt;&quot; +data[i] +&quot;&lt;/p&gt;&quot;);
      }
    }
  });
}else {
    $(&quot;#list&quot;).html(&quot;&quot;);
  }
})
&lt;/script&gt;

登录后复制

处理页面

&lt;?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/30
 * Time: 9:52
 */
$n = $_POST[&#39;n&#39;];
require_once &quot;../wenjian/DBDA.class.php&quot;;
$db = new DBDA();
$obj = &quot;select region_name from region WHERE region_name LIKE &#39;%{$n}%&#39; &quot;;
$data = $db-&gt;Query($obj);
//echo $data;
echo json_encode($data);

登录后复制