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

叶涛网站推广优化

于 2019-10-31 12:25:35 发布

阅读量1w

点赞数

文章标签： html网页常用功能：下拉框模糊搜索 html网页常用功能下拉框模糊搜索

本文链接：https://blog.csdn.net/yetaodiao/article/details/102835539

版权

天堂影院高清影院专栏收录该内容

35 篇文章 7 订阅

订阅专栏

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

<!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>

叶涛网站推广优化

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
html网页常用功能：下拉框模糊搜索

下拉框模糊搜索很好使，但是比较难实现，下面就直接贴代码吧。<!doctype html><html><head><meta charset="utf-8"><title>下拉框模糊搜索-jq22.com</title><script src="https://libs.baidu.com/jquery/1...
复制链接

扫一扫