介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; meta name=皏iewport",内容=翱矶?设备宽度,user-scalable=不,初始=1.0,比;
,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
& lt;/head>
& lt; style>
,* {
保证金才能:0;
,,填充:0;
,}
,.search {
边境才能:1 px solid 透明;
,,宽度:400 px;
,,身高:80 px;
保证金才能:0,汽车;
,}
,输入{.search
边境才能:1 px solid 灰色;
,,宽度:200 px;
,,身高:80 px;
,}
,.content {
,,宽度:200 px;
,/*高度:80 px; */边境才能:1 px solid 红色;
,,overflow-y:汽车;
,,max-height: 60 px;
,}
,.content p {
,,身高:20 px;
,}
& lt;/style>
& lt; body onload=皁nload()“比;
,& lt; div 类=皊earch"比;
& lt;才能input id=癷nput",类型=皌ext",占位符=扒胧淙搿?得到焦点=皊howDiv ()“, oninput=癴ilterP()“比;
& lt;才能div id=癲ataList",类=癱ontent", onclick=皃ushInput()“,在
,,& lt; p> 123 & lt;/p>
,,& lt; p> 159 & lt;/p>
,,& lt; p> 147 & lt;/p>
,,& lt; p> 163 & lt;/p>
& lt;才能/div>
,& lt;/div>
,& lt; script>
var 才能;dataArr =, [];
var 才能;dataList =, . getelementbyid (& # 39; datalist # 39;);
function 才能;onload(),{,//初始化dataArr的数据
,,var childs =, dataList.children;,//在IE下注释也算节点,不能用于
,,for (var 小姐:=,0;,小姐:& lt;, childs.length;,我+ +),{
,,,dataArr.push(孩子的[我].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 =, & # 39; & # 39;,,//清空div下的所有P元素
,,dataArr.forEach (function (项),{
,,,if (item.indexOf (str), !=, 1), {
,,,,var p =, document.createElement (& # 39; p # 39;);
,,,,var text =, document.createTextNode(项);
,,,,p.appendChild(文本);
,,,,dataList.appendChild (p);
,,,}
,,})
,,console.log (“dataList.innerHTML:“, +, dataList.innerHTML)
,,if (dataList.innerHTML ==, & # 39; & # 39;), {
,,,var p =, document.createElement (& # 39; p # 39;);
,,,var text =, document.createTextNode(& # 39;暂无数据& # 39;);
,,,p.style.color =, & # 39; # d7d7d7& # 39;;
,,,p.onclick =, function (), {, event.stopImmediatePropagation();,},//阻止事件的冒泡
,,,p.appendChild(文本);
,,,dataList.appendChild (p);
,,}
,,}
function 才能;pushInput(),{,//利用事件委托机制,获取点击的P源
,,var e =, event.target | |, event.srcElement;
,,var input =, . getelementbyid(& # 39;输入# 39;);
,,input.value =, e.innerText;
,,dataList.style.display =, & # 39;没有# 39;;
,,}/* *
,stopImmediatePropagation(),和,stopPropagation()的区别在哪儿呢?
后者只会阻止冒泡或者是捕获只但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生
* */,& lt;/script>
& lt;/body>
null
这篇文章给大家分享的是有关js如何实现带搜索功能的下拉框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> 1,介绍
在实现下拉框的时候,如果用选择+选项可以在满足pc端的需求,但如果需应用到手机端,由于选择的样式太丑,所以接下来利用div + p实现到输入文本的下拉框
<强> 2,思路
1利用一个输入充当搜索框,div + p充当下拉框放置于输入的下方。如图所示:
2接下来就是js的实现了,我们先把红色区域的div + p利用显示:没有隐藏起来。
对表单输入添加得到焦点事件,当输入获取焦点的时候获取显示红色区域。
在对表单添加oninput事件,根据输入的字段筛选出有关的p标签即可
3对红色区域的div设置点击事件,利用事件委托将点击的p标签的值赋值到输入上即可。
<强> 3代码
