Detailed explanation of ajax implementation of input prompt effect example-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Detailed explanation of ajax implementation of input prompt effect example

Dec 25, 2017 am 09:30 AM

ajax hint enter

js can realize the page input prompt effect, and ajax can also do it. This article mainly introduces in detail the method of ajax to realize the input prompt effect. It has certain reference value. Interested friends can refer to it. I hope it can help. Everyone.

Website home page

&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;

Copy after login

Processing page

&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);

Copy after login

Related recommendations:

jquery simulated title prompt effect

Practical JS form validation prompt effect_Form special effects

Based on jquery to achieve beautiful dynamic information prompt effect_jquery

The above is the detailed content of Detailed explanation of ajax implementation of input prompt effect example. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn