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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php 魔术方法详解
2014/11/11 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
Javascript实现字数统计
2015/07/03 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
护理专业应届毕业生推荐信
2013/11/15 职场文书
学校安全教育制度
2014/01/31 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
中学生检讨书1000字
2014/10/28 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
优秀教师先进材料
2014/12/16 职场文书
会计岗位职责范本
2015/04/02 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js
再谈python_tkinter弹出对话框创建
2022/03/20 Python