jQuery实现下拉菜单和模糊搜索

2人阅读 评论(0) 收藏 举报
分类:

原文地址 https://blog.csdn.net/apple_01150525/article/details/53219927

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        .second select {  
            width: 11%;  
            height: 106px;  
            margin: 0px;  
            outline: none;  
            border: 1px solid #999;  
            margin-top: 35px;  
        }  
        .second input {  
            width: 167px;  
            top: 9px;  
            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;  
            margin-left: -40px;  
            padding-left: 4px;  
        }  
        .blue {  
            background:#1e91ff;  
        }  
    </style>  
</head>  
<body>  
<div 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="10" style="display:none;">  
        <option value="">1</option>  
        <option value="">12</option>  
        <option value="">123</option>  
        <option value="">1234</option>  
        <option value="">12345</option>  
        <option value="">123456</option>  
        <option value="">1234567</option>  
        <option value="">12345678</option>  
    </select>  
</div>  
<script src = "js/jquery.js"></script>  
<script type = "text/javascript">  
    var TempArr=[];  
    $(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) {  
                if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {  
                    return;  
                }  
                elem = elem.parentNode;  
            }  
            $('#typenum').css('display', 'none');  
        });  
    })  
    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");  
        select.empty();  
        setinput(this_);  
        if(!select){  
        for(i=0;i<TempArr.length;i++){  
            var option = $("<option></option>").text(TempArr[i]);  
            select.append(option);  
        }  
        }  
    }  //substring(0,this_.value.length).indexOf(this_.value)==0
    function setinput(this_){  
        var select = $("#typenum");  
        select.html("");  
        for(i=0;i<TempArr.length;i++){  
            if(TempArr[i].indexOf(this_.value)!=-1){  
                var option = $("<option></option>").text(TempArr[i]);  
                select.append(option);  
            }  
        }  
    }  
</script>  
</body>  
</html>  

查看评论

Web前端开发实战3:二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用。前面两篇博文分别是用CSS样式和JS实现 的,那么这篇就用jQuery来实现二级下拉式菜单。        使用JQuery实...
  • erlian1992
  • erlian1992
  • 2015-12-31 19:42:11
  • 3412

可编辑的下拉列表+模糊搜索(模拟)

index.html: New Document 可编辑的下拉列表
  • qincidong
  • qincidong
  • 2011-09-02 22:57:15
  • 1553

jquery实现下拉菜单

  • 2017年09月12日 16:55
  • 35KB
  • 下载

jQuery实现模糊查询

今天做到一个类似从QQ群组选出
  • u011262156
  • u011262156
  • 2014-10-29 17:59:27
  • 4393

Jquery实现缓慢显示下拉菜单

Jquery实现缓慢显示下拉菜单
  • Wangdanting123
  • Wangdanting123
  • 2016-05-09 21:29:19
  • 5789

js 模糊查询 css可编下拉框

  • 2011年05月16日 17:46
  • 2KB
  • 下载

JS——下拉搜索列表(模糊搜索匹配)

var datas = [ {name:"总部管理支持部门",code:"0000-0001"}, {name:"董事会秘书局",code:"0000-0001-0002"}, {n...
  • yangchao13341408947
  • yangchao13341408947
  • 2017-01-22 16:19:12
  • 8102

基于ecshop 下拉框模糊匹配的集成

步骤 1. 下载文件包 并且解压 2. 将 dropbg.gif 放到 admin/images 目录下 3. 将 searchbox.js 放到 admin/js 目录下 4. 将st...
  • xiawu1990
  • xiawu1990
  • 2015-02-05 22:55:30
  • 1126

使用bootstrap-select实现下拉菜单的模糊搜索,支持单选和多选功能

初次使用bootstrap-select时遇到了不懂的地方在这里贴一下我遇到的问题,希望会对大家有帮助首先引入所需要的文件&amp;lt;link href=&quot;/bootstrap-sele...
  • yinwd_1
  • yinwd_1
  • 2018-03-16 16:15:26
  • 19
    个人资料
    持之以恒
    等级:
    访问量: 1305
    积分: 63
    排名: 152万+
    文章存档