网站主页

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

ajax 实现输入提示效果的更多相关文章

  1. VC++实现编辑框输入提示效果

    编辑框在第一次输入时最好给出一个虚拟的输入提示信息文本,这样的效果更佳友好.,我在编辑框添加灰色提示字(html+VC)一文中简单介绍了一些方法,但是效果欠佳. 原始的编辑框CEdit类没有这样的功能 ...

  2. ul模拟select，位置，数据，是否可输入及输入提示效果都可作为参数直接传入

    转发请注明出处,虽然转发几率不大... HTML <span class="theContainer"></span> CSS body {padding: ...

  3. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  4. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  5. ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    一.  fp.form.submit 有waitMsg 属性来设置等待效果,如下.但是对于Ext.Ajax.request来说 waitMsg 并不起作用.                     f ...

  6. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

  7. [DevExpress]利用LookUpEdit实现类似自动提示效果

    原文:[DevExpress]利用LookUpEdit实现类似自动提示效果 关键代码: public static void BindWithAutoCompletion(this LookUpEdi ...

  8. Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入

    先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...

  9. python利用Trie(前缀树)实现搜索引擎中关键字输入提示（学习Hash Trie和Double-array Trie）

    python利用Trie(前缀树)实现搜索引擎中关键字输入提示(学习Hash Trie和Double-array Trie) 主要包括两部分内容:(1)利用python中的dict实现Trie:(2) ...

随机推荐

  1. Parallelized coherent read and writeback transaction processing system for use in a packet switched cache coherent multiprocessor system

    A multiprocessor computer system is provided having a multiplicity of sub-systems and a main memory ...

  2. 20180725利用pmm监控管理mysql

    转自:https://www.percona.com/doc/percona-monitoring-and-management/architecture.html 报警机制https://www.p ...

  3. - > 动规讲解基础讲解八——正整数分组

    将一堆正整数分为2组,要求2组的和相差最小.例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 整数个数n<=100,所有整数的和<=1 ...

  4. 14、Java并发性和多线程-Java ThreadLocal

    以下内容转自http://ifeve.com/java-theadlocal/: Java中的ThreadLocal类可以让你创建的变量只被同一个线程进行读和写操作.因此,尽管有两个线程同时执行一段相 ...

  5. XAPIAN简单介绍(三)

    今天主要介绍的是Xapian::Database这个类.先上图 看上去就非常恐怖的吧,我们一点点的说. 首先一切的開始都来自那个include目录中的database.h,他的直接实现是在omdata ...

  6. Lotto（DFS处理）

    题目再现 题目内容: 给定N个数字,再从中选定M个数字出来. 将每一种组合内的数字由小到大排列之后, 将全部组合依照字典序排列. 请你找出第X组的第Y个数字. 给定的数字为1~N. 范例1 (N,M, ...

  7. bzoj2186【SDOI2008】沙拉公主的困惑

    2186: [Sdoi2008]沙拉公主的困惑 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 2363  Solved: 779 [id=2186& ...

  8. Android View measure （三） 经常用法

    ViewGroup.measureChildren() ViewGroup.measureChild() ViewGroup.measureChildWithMargins() /** * Ask o ...

  9. 【转】MySQL随机字符串生成

    DROP FUNCTION IF EXISTS rand_string; DELIMITER $$ CREATE FUNCTION rand_string(str_length TINYINT UNS ...

  10. LeetCode 349. Intersection of Two Arrays （两个数组的相交）

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...