简介
- 下拉框支持主流浏览器，兼容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>
测试界面展示
1.初始化展示
2.点击输入框或下拉图标后
3.输入连续字符后的过滤
4.输入不连续字符后的过滤
5.输入未包含字符时
6.选择后获取信息
版权声明：本文为u010554942原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。