900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html网页常用功能:下拉框模糊搜索

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

时间:2023-07-04 22:06:25

相关推荐

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

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

<!doctype html><html><head><meta charset="utf-8"><title>下拉框模糊搜索-</title><script src="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。