简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  • 全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
    您现在的位置:首页 >> JS >> 内容

    js实现搜索提示框效果

    内容摘要:首先写静态页面div class='container' !-- 搜索框 -- input type='text' id='search' / !-- 动态提示的数据框liebia -- div id='alert'ul/ul /div/divCSS样式* { margin: 0; padding: 0;}html,body { background: da......

      首先写静态页面

    <div class="container">

    <!-- 搜索框 -->

    <input type="text" id="search" />

    <!-- 动态提示的数据框liebia -->

    <div id="alert">

    <ul></ul>

    </div>

    </div>

    CSS样式

    * {

    margin: 0;

    padding: 0;

    }


    html,

    body {

    background: darkgray;

    }


    .container {

    position: absolute;

    left: 50%;

    top: 50px;

    transform: translateX(-50%);

    }


    #search {

    width: 300px;

    height: 50px;

    padding-left: 10px;

    border-radius: 5px;

    border: none;

    outline: none;

    }


    #alert {

    width: 312px;

    position: relative;

    left: -1px;

    display: none; /* 将ul列表隐藏 */

    }


    #alert > ul {

    list-style: none;

    margin: 0;

    padding: 0;

    }


    #alert > ul > li {

    border: 0.5px solid #000;

    height: 40px;

    line-height: 40px;

    padding-left: 10px;

    border-radius: 5px;

    background: #fff;

    }


    #alert > ul:last-child {

    border-bottom: 1px solid #000;

    }

    JS代码

    var $search = $("#search");

    var $alert = $("#alert");

    var $alertUl = $("#alert>ul");


    // 清空列表的方法

    function clearUl() {

    $alertUl.empty();

    }


    $search

    .bind("input", function () {

    // 清空列表

    clearUl();


    // 获取到用户所输入的内容

    var value = $(this).val();

    // console.log(value);


    // 使用getJSON方法获取json数据

    $.getJSON("data/server4.json", function (data) {

    // console.log(data);

    // 获取到json数据中的name值

    $.each(data, function (input, obj) {

    // console.log(obj);

    var name = obj.name;

    // console.log(name);


    if (name.indexOf(value) >= 0) {

    // 表示输入的内容在name中存在

    var valueArr = obj.value;

    // console.log(valueArr);

    $.each(valueArr, function (input, text) {

    // console.log(text);

    // 将数据添加到HTML页面

    $alertUl.append(`<li>${text}</li>`);

    });

    }

    });

    });


    // 将ul列表显示出来

    $alert.css("display", "block");

    })

    .bind("blur", function () {

    $alert.css("display", "none");

    });

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/9/8 发布时间:15:10:58 点击:421 
  • 上一篇:JavaScript实现多球运动效果
  • 下一篇:js实现星星海特效的示例
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.35 Build 20.8.26(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2020