js实现搜索提示框效果


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了js实现搜索提示框效果的具体代码,供大家参考,具体内容如下

首先写静态页面

<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");
});

实现效果

js实现搜索提示框效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
jQuery实现简单三级联动效果
Sep 05 #jQuery
javascript canvas实现简易时钟例子
Sep 05 #Javascript
vue中使用vue-pdf的方法详解
Sep 05 #Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 #Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 #Javascript
js实现可爱的气泡特效
Sep 05 #Javascript
js实现点击按钮随机生成背景颜色
Sep 05 #Javascript
You might like
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Javascript Global对象
2009/08/13 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python监控nginx端口和进程状态
2019/09/06 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Django使用rest_framework写出API
2020/05/21 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
个人求职信范例
2014/01/29 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电