Home Backend Development PHP Tutorial Detailed explanation of ajax implementation of input prompt effect example

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

<!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>
<p style="height: 50px;width: 200px"><input type="text" id="name" style="width: 198px;height: 48px;"></p>
<p id="list" style="height: 500px;width: 200px;border: 1px solid black">
<!--<p id="l">zhongguo</p>-->
</p>

</body>
</html>
<script>
$("#name").keyup(function () {
  var n = $("#name").val();
  if (n != ""){
  $.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("|");
//     var str = "";
//     for (var i=0;i<s.length;i++)
//     {
//       str = str + "<p class=&#39;l&#39;>" +s[i] +"</p>";
//     }
//     $("#list").html(str);
//json写法

      for (var i in data){
        $("#list").append("<p class=&#39;l&#39;>" +data[i] +"</p>");
      }
    }
  });
}else {
    $("#list").html("");
  }
})
</script>
Copy after login

Processing page


<?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/30
 * Time: 9:52
 */
$n = $_POST[&#39;n&#39;];
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$obj = "select region_name from region WHERE region_name LIKE &#39;%{$n}%&#39; ";
$data = $db->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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if Google Chrome prompts that the content of this tab is being shared? What should I do if Google Chrome prompts that the content of this tab is being shared? Mar 13, 2024 pm 05:00 PM

What should I do if Google Chrome prompts that the content of this tab is being shared? When we use Google Chrome to open a new tab, we sometimes encounter a prompt that the content of this tab is being shared. So what is going on? Let this site provide users with a detailed introduction to the problem of Google Chrome prompting that the content of this tab is being shared. Google Chrome prompts that the content of this tab is being shared. Solution: 1. Open Google Chrome. You can see three dots in the upper right corner of the browser "Customize and control Google Chrome". Click the icon with the mouse to change the icon. 2. After clicking, the menu window of Google Chrome will pop up below, and the mouse will move to "More Tools"

Windows input encounters hang or high memory usage [Fix] Windows input encounters hang or high memory usage [Fix] Feb 19, 2024 pm 10:48 PM

The Windows input experience is a key system service responsible for processing user input from various human interface devices. It starts automatically at system startup and runs in the background. However, sometimes this service may automatically hang or occupy too much memory, resulting in reduced system performance. Therefore, it is crucial to monitor and manage this process in a timely manner to ensure system efficiency and stability. In this article, we will share how to fix issues where the Windows input experience hangs or causes high memory usage. The Windows Input Experience Service does not have a user interface, but it is closely related to handling basic system tasks and functions related to input devices. Its role is to help the Windows system understand every input entered by the user.

How to solve the 403 error encountered by jQuery AJAX request How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

How to solve jQuery AJAX request 403 error How to solve jQuery AJAX request 403 error Feb 19, 2024 pm 05:55 PM

jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error

How to get variables from PHP method using Ajax? How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

Baidu Tieba app prompts that the operation is too frequent, what's the matter? Baidu Tieba app prompts that the operation is too frequent, what's the matter? Apr 01, 2024 pm 05:06 PM

Baidu Tieba app prompts that the operation is too frequent. This prompt is usually to maintain the normal operation and user experience of the platform to prevent malicious screen spam, advertising spam and other inappropriate behaviors. For specific handling methods, you can read the tutorial shared by the editor. Baidu Tieba app prompts that the operation is too frequent. Sharing how to deal with it 1. When the system prompts [Operation is too frequent], we need to wait for a while. If you are anxious, you can do something else first. Generally, after waiting for a while, this prompt message will It will disappear automatically and we can use it normally. 2. If after waiting for a long time, it still displays [Operation Too Frequent], we can try to go to Tieba Emergency Bar, Tieba Feedback Bar and other official Tieba, post to report this phenomenon and ask official personnel to solve it. 3.

How to solve the problem of jQuery AJAX error 403? How to solve the problem of jQuery AJAX error 403? Feb 23, 2024 pm 04:27 PM

How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

See all articles