js实现带搜索功能的下拉框


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下

1、介绍

在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的样式太丑。所以接下来利用div+p实现到输入文本的下拉框

2、思路

1 利用一个input充当搜索框,div+p充当下拉框放置于input的下方。如图所示:

js实现带搜索功能的下拉框

2 接下来就是js的实现了,我们先把红色区域的div+p利用display:none隐藏起来。
对表单input添加onfocus事件,当input获取焦点的时候获取显示红色区域。
在对表单添加oninput事件,根据input的字段筛选出有关的p标签即可

3 对红色区域的div设置点击事件,利用事件委托将点击的p标签的值赋值到input上即可。

3、代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 .search{
  border: 1px solid transparent;
  width: 400px;
  height: 80px;
  margin: 0 auto;
 }
 .search input{
  border: 1px solid gray;
  width: 200px;
  height: 80px;
 }
 .content{
  width: 200px;
 /* height: 80px; */
  border: 1px solid red;
  overflow-y: auto;
  max-height: 60px;
 }
 .content p {
  height: 20px;
 }
</style>
<body onload="onload()">
 <div class="search">
  <input id="input" type="text" placeholder="请输入" onfocus="showDiv()" oninput="filterP()">
  <div id="dataList" class="content" onclick="pushInput()" style="display:none;">
   <p>123</p>
   <p>159</p>
   <p>147</p>
   <p>163</p>
  </div>
 </div>
 <script>
  var dataArr = [];
  var dataList = document.getElementById('dataList');
  function onload() { //初始化dataArr的数据
   var childs = dataList.children; //在IE下注释也算节点,不能用于
   for (var i = 0; i < childs.length; i++) {
    dataArr.push(childs[i].innerText);
   }
   console.log(dataArr);
  }
  function showDiv() {
   dataList.style.display = "";
  }
  function filterP() {
   var e = event.target || event.srcElement;
   var str = e.value;
   console.log(str);
   dataList.innerHTML = ''; //清空div下的所有P元素
   dataArr.forEach(function (item) {
    if (item.indexOf(str) != -1) {
     var p = document.createElement('p');
     var text = document.createTextNode(item);
     p.appendChild(text);
     dataList.appendChild(p);
    }
   })
   console.log("dataList.innerHTML:" + dataList.innerHTML)
   if (dataList.innerHTML == '') {
    var p = document.createElement('p');
    var text = document.createTextNode('暂无数据');
    p.style.color = '#d7d7d7';
    p.onclick = function () { event.stopImmediatePropagation(); } //阻止事件的冒泡
    p.appendChild(text);
    dataList.appendChild(p);
   }
  }
  function pushInput() { //利用事件委托机制,获取点击的P源
   var e = event.target || event.srcElement;
   var input = document.getElementById('input');
   input.value = e.innerText;
   dataList.style.display = 'none';
  }
/**
 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢?
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生
 **/
 </script>
</body>
</html>

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

Javascript 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
给js文件传参数(详解)
Jul 13 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
js实现select下拉框选择
Jan 11 #Javascript
js实现二级联动简单实例
Jan 11 #Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 #Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
第五章 php数组操作
2011/12/30 PHP
PHP可变函数的使用详解
2013/06/14 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python更改已存在excel文件的方法
2018/05/03 Python
python验证身份证信息实例代码
2019/05/06 Python
pandas计数 value_counts()的使用
2019/06/24 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
企业员工薪酬方案
2014/06/04 职场文书
支部组织生活会方案
2014/06/10 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
辩护词范文大全
2015/05/21 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
浅谈python数据类型及其操作
2021/05/25 Python