网站主页

       <!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. Mysql 练习题 及 答案

    --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表  Course(C,Cname,T ...

  2. 这段百度问答，对我相关有对啊！！！----如何获取Windows系统登陆用户名

    如何获取Windows系统登陆用户名 http://zhidao.baidu.com/link?url=Hva9PkVwYZv8KSEWftSqTWe8fqM1dhoq59BurnfADmcOvFjF ...

  3. BP神经网络及其在教学质量评价中 的应用

    本文学习笔记是自己的理解,如有错误的地方,请大家指正批评.共同进步.谢谢! 之前的教学质量评价,仅仅是通过对教学指标的简单处理.如求平均值或人为的给出各指标的权值来加权求和,其评价结果带有非常大主观性 ...

  4. 交换机tagged与untagged的关系深入探讨

    端口接收数据时: 如果端口是tagged方式,当数据包本身不包含VLAN的话,输入的数据包就加上该缺省vlan:如果数据包本身已经包含了VLAN,那么就不再添加. 如果是untagged方式,输入的数 ...

  5. HDOJ 5383 Yu-Gi-Oh! 最大费用最大流

    网络流裸题: 分两部分建图,求不要求满流的最大费用最大流..... Yu-Gi-Oh! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: ...

  6. 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步

    深入理解MVC   MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...

  7. LeetCode 9. Palindrome Number （回文数字）

    Determine whether an integer is a palindrome. Do this without extra space. 题目标签:Math 题目给了我们一个int x, ...

  8. idea2016的使用心得 --- 太棒了

    今天打开myeclipse感觉里面全是project,也懒着换地方了,因为这些代码还要时常看,索性安装了idea试试水,感觉还不错,用起来并不比myeclipse差,跟webstorm差不多,他俩就是 ...

  9. 【剑指offer】斐波那契序列与跳台阶

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25337983 剑指offer上的第9题,简单题,在九度OJ上測试通过. 主要注意下面几点: ...

  10. bookstrap form表单简单-smart-form

    代码: <form class="smart-form" id="smartForm"> <fieldset> <legend&g ...