简单实用js——可输入可选择可模糊查询的select下拉

简单实用js——可输入可选择可模糊查询的select下拉

http://blog.csdn.net/sun2015_07_24/article/details/53023167

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> select_input </title>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script>
  <style type="text/css">
    .second select {  
    width: 11%;  
    height: 106px;  
    margin: 0px;  
    outline: none;  
    border: 1px solid #999;  
    margin-top: 31px;  
}  
.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;  
    /* left: 15px; */  
    margin-left: -40px;  
    font-family: 微软雅黑;  
    padding-left: 4px;  
}  
.blue {   
    background:#1e91ff;   
}  
  </style>
 </head>

 <body>

<form method="post" action="show_post.php">  
    <!-- 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="10" style="display:none;">  
                        <option value="">周杰伦</option>  
                        <option value="">周杰</option>  
                        <option value="">林俊杰</option>  
                        <option value="">林宥嘉</option>  
                        <option value="">林妙可</option>  
                        <option value="">唐嫣</option>  
                        <option value="">唐家三少</option>  
                        <option value="">唐朝盛世</option>  
                        <option value="">奥迪A4L</option>  
                        <option value="">奥迪A6L</option>  
                        <option value="">奥迪A8L</option>  
                        <option value="">奥迪R8</option>  
                        <option value="">宝马GT</option>  
        </select> 
    <!-- /span -->
    <div><input type="submit" /></div>
</form>  



<script type="text/javascript">
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>
<?php
//show_post.php
header("Content-type: text/html; charset=utf-8");
var_dump($_POST);

 

posted @ 2017-12-13 10:34  sky20080101  阅读(428)  评论(0)    收藏  举报