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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
js如何打印object对象
Oct 16 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
js实现登录与注册界面
Nov 01 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
我的论坛源代码(五)
2006/10/09 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
破解Session cookie的方法
2006/07/28 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
vue.js中created方法作用
2018/03/30 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
司机岗位职责说明书
2014/07/29 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python 正则模块详情
2021/11/02 Python
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers