html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下
1、介绍
在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的样式太丑。所以接下来利用div+p实现到输入文本的下拉框
2、思路
1 利用一个input充当搜索框,div+p充当下拉框放置于input的下方。如图所示:
2 接下来就是js的实现了,我们先把红色区域的div+p利用display:none隐藏起来。
对表单input添加onfocus事件,当input获取焦点的时候获取显示红色区域。
在对表单添加oninput事件,根据input的字段筛选出有关的p标签即可
3 对红色区域的div设置点击事件,利用事件委托将点击的p标签的值赋值到input上即可。
3、代码
*{
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;
}
123
159
147
163
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()的区别在哪儿呢?
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生
**/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
html搜索框如何加下拉框,js实现带搜索功能的下拉框相关推荐
- javascritp 实现 带chekcbox功能的下拉框
首先设置初始下拉框内容为隐藏的,点击<请选择>执行changeR方法 changR方法里运用 switch 并设置 标志 初始为1,在1的情况下 让下拉框内容循环显示 并将标志位设置为 ...
- html 文本框数量加减,收藏!js实现input加减
好的程序员是会复制粘贴的,这样说好像会被唾弃的..... html 减号按钮点击事件 function subtraction(){ //获取-号按钮 var subtraction = docume ...
- 三星二级菜单_Excel 如何设计带联想的二级下拉菜单?
在百度搜索网站中输入搜索关键词时,百度会逐步弹出相关的词条列表.例如,输入"三"会弹出包含"三国杀"."三维度"之类的词条列表,而输入&qu ...
- 计算机 子分数 游戏图形,Windows7下如何开启和关闭系统分级功能.doc
Windows7下如何开启和关闭系统分级功能.docWindows7下如何开启和关闭系统分级功能.docWindows7下如何开启和关闭系统分级功能.doc Windows 7下如何开启与关闭系统分级 ...
- el-select下拉框懒加载以及搜索联合处理+搜索防抖处理
前言 本文采主要用了自定义指令结合绑定滚动条事件的方式 问题描述 现有一个页面,充斥着大量表单元素,首先要知道的是vue对于视图上的更新机制,在一个组件内若有元素发生变动,那么整个组件就会刷新渲染,所 ...
- chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件 官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
- layui下拉选择框开启搜索功能后,文本框会将Nbsp显示出来的解决办法
layui下拉选择框直接在select标签添加lay-search,即可开启搜索功能 <select id="selectCategory" lay-filter=" ...
- h5、select下拉框右边加图标,深度美化页面增进用户体验
h5.select下拉框右边加图标,深度美化页面增进用户体验 1.那么我们先来看一下效果吧! 2.再看看h5的结构: <div id="login-div"><d ...
- Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
最新文章
- 第四章:2.串 -- 串的模式匹配算法(KMP)
- XSS CSRF 攻击
- Redis雪崩、穿透、击穿补充学习与布隆过滤器
- mysql 空洞 性能_mysql 删除数据空洞有关问题,多谢
- PowerPoint储存此文件时发生错误 出现错误的问题解决方法
- Linux 性能优化全景指南
- java计算机毕业设计基于安卓Android的二手交易app-闲置物品交易app-ssm
- Tensorflow keras入门教程
- 1、VS2019配置glfw和glad
- 地理信息系统(GIS)系列——Portal for ArcGIS
- 如何根据离散点自动绘制等值线(等高线)之 客观分析
- hook系统调用(一):爬取MSDN官网上的API调用并改为自己的API(c++正则表达式的应用)
- 深入理解Spark RDD——RDD信息对象
- css首字下沉_一个简单CSS首字下沉
- Fluke TiS60+红外热像仪 福禄克TiS60+热成像仪
- 插件推荐:json解析—Gson以及GsonFormat插件的运用
- 从雄心创业到无奈打工,我与SEO的爱恨情仇
- 傅立叶变换c语言实现
- android gps free,AndroiTS GPS Test Free
- 鼠标右键弹出快捷菜单的实现