网站主页

       <!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. 转载 - Struts2 拦截器详细配置过程

    出处:http://www.blogjava.net/zzzlyr/archive/2009/10/12/297998.html Struts2 拦截器详细配置过程 1:所有拦截器的超级接口Inter ...

  2. multiple instance of mac app

    一般情况下,mac系统上的应用程序只能启动一个实例,现在做项目,需要mac上同时启动多个实例,如何做呢,下面就说明完成这个功能的方法: 主要原理:利用 open -n Applications/XXX ...

  3. HDU——2824 The Euler function

    The Euler function Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  4. 27、Java并发性和多线程-CAS（比较和替换）

    以下内容转自http://ifeve.com/compare-and-swap/: CAS(Compare and swap)比较和替换是设计并发算法时用到的一种技术.简单来说,比较和替换是使用一个期 ...

  5. docker: 解决centos7下cgroup.procs: no such device的错误

    在centos7下,运行docker run的时候会发生cgroup.procs: no such device的错误,解决方法是编辑 /lib/systemd/system/docker.servi ...

  6. ubuntu update时发生错误

    The following packages have been kept back解决方案Ubuntu和Debian下更新软件包,在运行 sudo apt-get upgrade 有时会看到如下提示 ...

  7. 利用scons构建project

    scons有非常多相对于make构建系统的优秀特性,可是因为发展时间比較短如今的应用范围还是不太多,可以找到的资料也不是非常多. scons如今一大问题就是初始上手还是有点难度的,对于有python的 ...

  8. Python3标准库（一） 内置函数

    Python中内置了很多的函数,而学习标准库我们需要事先熟悉这些内置函数,所以在这里一个个进行介绍.有些函数比较简单,只给予文字描述,而有些函数会给出示例代码帮助理解. 1.abs(x):返回一个整数 ...

  9. School Personal Contest #1 （Codeforces Beta Round #38）---A. Army

    Army time limit per test 2 seconds memory limit per test 256 megabytes input standard input output s ...

  10. js 得到 radiobuttonlist和CheckBoxList 选中值

    js 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButton ...