zoukankan      html  css  js  c++  java
  • ajax 实现输入提示效果

    网站主页

           <!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; 200px"><input type="text" id="name" style=" 198px;height: 48px;"></div>
    <div id="list" style="height: 500px; 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);
  • 相关阅读:
    32 renren-fast-vue安装报错问题
    31 element自定义图片上传
    30 图片预览
    29 element-table样式更改
    28 ant-design-vue-jeecg运行报错问题
    27 mysql8安装
    25 mybatis-plus常用语法
    24 element表单校验
    23 鼠标移入移出更换样式
    22 初识mysql外键
  • 原文地址:https://www.cnblogs.com/dej-11/p/7755294.html
Copyright © 2011-2022 走看看