网站主页

       <!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. T1082 线段树练习3 codevs

    http://codevs.cn/problem/1082/ 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 ...

  2. Android百度地图SDK 导航初始化和地图初始化引起的冲突

    如题,相同是百度地图SDK开发过程中遇到的一个问题.交代下背景: 开发了一款内嵌百度地图的应用,因此里面差点儿相同将眼下百度地图SDK开放的主要功能都用到了,定位,地图显示,覆盖物标示.POI搜索,行 ...

  3. IOS - 设置与帮助界面

    设置与帮助 改动头像, 改动password, 移动客服, 帮助, 声明, 关于我们. 代码 // // IndexSetting600ViewController.h // SymptomCheck ...

  4. #HDU 3790 最短路径问题 【Dijkstra入门题】

    题目: 最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. 如何用分布式缓存服务实现Redis内存优化

    Redis是一种支持Key-Value等多种数据结构的存储系统,其数据特性是“ALL IN MEMORY”,因此优化内存十分重要.在对Redis进行内存优化时,先要掌握Redis内存存储的特性比如字符 ...

  6. jeasyui-datagrid使用笔记

    formatter转换ID为值 设置字典缓存 var DictionaryItem = {}; $.post('/Dictionary/GetDictionary/T_RKXD', function ...

  7. WIZnet的网络产品怎样选型

    文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...

  8. UVALive 4212 - Candy

    Little Charlie is a nice boy addicted to candies. He is even a subscriber to All Candies Magazine an ...

  9. Android 完全退出应用程序

    随着业务逻辑越来越复杂,退出应用程序也不像之前那个直接将Activity finish()掉就可以了,在网上看到很多完全退出App的文章,但是实践之后发现,并不像文章中描述的那样,不是方法过时了,就是 ...

  10. tiny4412 裸机程序 六、重定位代码到IRAM+0x8000【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37115697 一.重定向 对于程序而言,我们需要理解两个概念,一是程序当前所处的地址,即程序在运 ...