基於jquery的帶搜索功能的下拉框，兼容IE5/6/7/8/9/10和主流瀏覽器，含組件源碼

簡介

下拉框支持主流瀏覽器，兼容IE5/6/7/8/9/10,不兼容Edge
下拉框有模糊搜索功能
下拉框的值有兩個，text、data_id
代碼是基於jquery的，版本使用的：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

組件下載地址

組件的使用方法

1.需要引用的css和js

<link rel="stylesheet" href="css/xyz-search-0.1.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/xyz-search-0.1.js"></script>

2.html使用代碼

<style>
    .my-data>div{
        float: left;
    }
    .all-data{
        width: 250px;
        background-color: #cbcd44;
    }
    .show-data{
        width: 250px;
        background-color: #7ecdcc;
    }
</style>
<body>
<h3>帶搜索功能的下拉選擇菜單</h3>
<h3>支持主流瀏覽器</h3>
<h3>兼容IE5/6/7/8/9/10/</h3>
<div class="my-data">
    <div>下拉框：</div>
    <div class="xyz-search-div">
        <div style="position: relative;">
            <input class="xyz-search-input"/>
            <img src="arrow1.png" class="xyz-search-img"/>
        </div>
        <div class="xyz-search-select"></div>
    </div>
    <div>所有數據：</div>
    <div class="all-data">

    </div><!--所有數據展示-->
    <div>匹配數據：</div>
    <div class="show-data">

    </div><!--匹配數據展示-->
</div>
<button id="btn_getdata">獲取數據</button>

</body>

3.js使用代碼

<script type="text/javascript">
    var data = [];
    data[0] = {name:'蘋果',id:'120'};
    data[1] = {name:'香蕉',id:'121'};
    data[2] = {name:'梨子',id:'122'};
    data[3] = {name:'李子',id:'123'};
    data[4] = {name:'栗子',id:'124'};
    data[5] = {name:'菠蘿',id:'125'};
    data[6] = {name:'鳳梨',id:'126'};
    data[7] = {name:'葡萄',id:'127'};
    data[8] = {name:'楊梅',id:'128'};
    data[9] = {name:'櫻桃',id:'129'};
    data[10] = {name:'但是可拉倒就垃圾了',id:'129'};
    data[11] = {name:'廣東省福利就打算離開分解落實到',id:'129'};
    data[12] = {name:'點擊搜啊哦評價哦蓉兒',id:'129'};
    data[13] = {name:'股份大概就立刻就陪我',id:'129'};
    data[14] = {name:'來客人了很快就恢復',id:'129'};
    data[15] = {name:'大好好玩日',id:'129'};
    data[16] = {name:'發到你什麼能吃嗎',id:'129'};
    /**
     * 展示所有數據
     */ 
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        $(".all-data").append("<div class='xyz-search-element' data_id='"+item.id+"'>"+item.name+"</div>");
    }
    /**
     * 初始化下拉框
     */ 
    init_xyz_search({
        array:data,//數據
        size: 4,//下拉框顯示的條數
        width: 200//下拉框長度
    });
    /**
     * 獲取數據，並展示
     */
    $("#btn_getdata").on("click",function () {
       var str = $(".xyz-search-input").val() + " : " + $(".xyz-search-input").attr("data_id");
       alert(str);
    });
</script>