网站主页

       <!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. Spring Tool Suite（STS）启动时出现错误：Java was started but returned exit code=13问题解决

    Spring Tool Suite(STS)是开发Spring的套件,也就是一个Eclipse,在之上增加了对Spring框架的支持,使其能快速的开发Spring. 错误如下: 解决办法: 如果系统安 ...

  2. Android GIS开发系列-- 入门季（2） MapView与图层介绍

    一.MapView MapView是Arcgis中的最基本的类,与高德地图SDK的MapView的重要性一样.MapView的创建有两种方法,一种是在Layout文件中直接写控件.一种是实例化,Map ...

  3. 万能存储工具类SDCard存储 /data/data/存储 assets存储 raw存储

    万能存储工具类 SDCard存储  /data/data/存储  assets存储 raw存储 粘贴过去就能够用了 <uses-permission android:name="and ...

  4. java界面编程(9) ------ 列表框

    本文是自己学习所做笔记,欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 列表框和JComboBox组合框明显不同,这不不过体如今外观上. 当激活JCom ...

  5. OpenStack二三事(2)

    使用devstack在virtualbox上安装openstack还真是比較麻烦,到处都是坑.近期碰到的坑是在tempest上,在执行verify-tempest-config时,代码中import了 ...

  6. 【UI自动化方面】

    1.自动化执行失败如何排查故障. 答:1).查看log,错误原因.[log不详细的话,可以优化] 2).排查是否真的有bug,若不是bug查看是否是新版本引入了新的变更. 3).调试脚本看自己脚本是不 ...

  7. Linux下一款可以使用命令行的pdf阅读器

    Zathura是linux下一款用命令行控制打pdf阅读器,并且基本打使用方法和vim很相似.对于喜欢键盘操作的用户来说的确是一个不错的选择. ubuntu下的安装命令: sudo apt-get i ...

  8. cocos2dx 编译时间长问题

    { F:\cocos2dx\cocos2d-x-3.7.1\templates\cpp-template-default 彻底解决方式 为把cocos的模版项目编译好(详细是所有生成好并清理Hello ...

  9. Android 使用MediaRecorder录音调用stop()方法的时候报错【转】

    本文转载自:http://blog.csdn.net/u014737138/article/details/49738827 这个问题在网上看到了太多的答案,一直提示说按照官网的api的顺序来,其实解 ...

  10. 【POJ 1275】 Cashier Employment

    [题目链接] 点击打开链接 [算法] 设Ti为第i小时有多少个出纳员开始工作,Vi表示第i小时有多少个来应聘的出纳员 那么,有 : 1. 0 <= Ti <= Vi 2. Ti + Ti- ...