html网页常用功能：下拉框模糊搜索

下拉框模糊搜索很好使，但是比较难实现，下面就直接贴代码吧。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉框模糊搜索-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.second select {width:169px;height:106px;margin:0px;margin-top:60px;outline:none;border:1px solid #999;margin-top:31px;
}
.second input {width:167px;top:6px;outline:none;border:0pt;position:absolute;line-height:30px;left:8px;height:30px;border:1px solid #999;
}
.second ul {position:absolute;top:27px;border:1px solid #999;left:8px;width:125px;line-height:16px;
}
.ul li {list-style:none;width:161px;/* left:15px;*/  margin-left:-40px;font-family:微软雅黑;padding-left:4px;
}
.blue {background:#1e91ff;
}
</style>
</head>
<body><span class="second">  <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入">  <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="12" style="display:none;">  <option value="">不隶属于任何分类(详情页)</option>  <option value="">华军首页</option>  <option value="">华军M站</option>  <option value="">游戏下载-华军</option>  <option value="">热门资讯-华军</option>  <option value="">下载攻略-华军</option>  <option value="">下载攻略-pcsoft</option>  <option value="">热门资讯-pcsoft</option>  <option value="">办公软件-188soft</option>  <option value="">pcsoft首页</option> </select>
</span> <script>
var TempArr = []; //存储option
$(function() {/*先将数据存入数组*/$("#typenum option").each(function(index, el) {TempArr[index] = $(this).text();});$(document).bind('click',function(e) {var e = e || window.event; //浏览器兼容性     var elem = e.target || e.srcElement;while (elem) { //循环判断至跟节点，防止点击的是div子元素     if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {return;}elem = elem.parentNode;}$('#typenum').css('display', 'none'); //点击的不是div或其子元素     });
})function changeF(this_) {$(this_).prev("input").val($(this_).find("option:selected").text());$("#typenum").css({"display": "none"});
}
function setfocus(this_) {$("#typenum").css({"display": ""});var select = $("#typenum");for (i = 0; i < TempArr.length; i++) {var option = $("<option></option>").text(TempArr[i]);select.append(option);}
}function setinput(this_) {var select = $("#typenum");select.html("");for (i = 0; i < TempArr.length; i++) {//若找到以txt的内容开头的，添option  if (TempArr[i].substring(0, this_.value.length).indexOf(this_.value) == 0) {var option = $("<option></option>").text(TempArr[i]);select.append(option);}}
}
</script></body>
</html>

html网页常用功能：下拉框模糊搜索相关推荐

vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
tomcat项目下拉框模糊搜索
http://t.csdn.cn/eQhxG 这是我以前写的vue项目下拉框搜索,今天做tomcat项目还是以前那一套问题,datalist最简单,但是位置难改变,不同浏览器表现不同, input+ ...
网页里面的下拉框与数据库交互
对于常用的表单来说,用value取值居多. 而下拉框这个神圣,常用的东西,与servlet交互,就常见啦. 核心就是下拉框的文本改变事件和 js相结合来传值啦下面是一个小demo,一个分页的小de ...
jQuery+css模拟下拉框模糊搜索的实现
html: @*输入框*@ <div><input type="text" style="width: 85%; height: 34px;" ...
使用select2实现多功能下拉框，select2中文api
最近项目中有个需求是商品能够选择多个标签,类似jire中选择标签: 能把选择后选项显示在输入框中,删除时连同整个标签一起删.经过网上咨询.请教同事后,得到一致意见是使用select2. 下面是使用se ...
java下拉框及响应函数_MVC 实现下拉框 - osc_88wjsceo的个人空间 - OSCHINA - 中文开源技术交流社区...
MVC动态实现下拉框的方式有很多种,但是方便快捷的却是很少,现在记录一种常用的下拉框实现方式: 1.先看看视图代码是怎么写的这是一个下拉框: @Html.DropDownList("sel ...
什么是今日头条下拉词下拉框？
什么是今日头条下拉词下拉框? 什么是今日头条下拉词下拉框?简单的来说,今日头条下拉词下拉框跟百度.搜狗下拉词下拉框这些是同样的原理跟道理. 下拉框就是在网页或者app搜索某个关键词的时候,会出现一个下 ...
纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

html网页常用功能：下拉框模糊搜索

html网页常用功能：下拉框模糊搜索相关推荐

最新文章

热门文章