JS封装的下拉框

Posted 2020-10-17

根据拼音首字母查询课程

调用：

var test2 = new ShangShu.Course.Select(1, ‘test2‘,data);
test2.init();
参数：
1. 1----排列的序号，当调用多个，显示在最前不会被覆盖
2. test2----附加在此ID下的文本框下
3. data-----数据

html代码：

<script type="text/javascript" src="./ShangShu/jquery.js"></script>
<style>
div,span,a,p{
margin:0;
padding:0;
}
</style>
测试页面<br/>
<div style="left:200px;top:100px;">
<div>
<input type="text" placeholder="中文/拼音" value="" style="width:260px;height:30px;outline:none;padding:0 1px;margin:0;" id="test2" />
</div>
</div>
<script>
var data = {"B":[{"id":43,"name":"办公空间设计","initial":"BGKJSJ","code":10084102},{"id":107,"name":"毕业设计考察","initial":"BYSJKC","code":10087013},{"id":106,"name":"毕业实习","initial":"BYSX","code":10087012}],"C":[{"id":80,"name":"设计初步A","initial":"CBSJA","code":10082201},{"id":59,"name":"城市广场景观设计","initial":"CSGCJGSJ","code":13084205},{"id":54,"name":"城市公共艺术设计","initial":"CSGGYSSJ","code":13084201},{"id":40,"name":"城市规划原理B","initial":"CSGHYLB","code":13013320},{"id":58,"name":"城市街道景观设计","initial":"CSJDJGSJ","code":13084204},{"id":76,"name":"城市色彩","initial":"CSSC","code":13082015},{"id":64,"name":"城市艺术概论","initial":"CSYSGL","code":10082010},{"id":49,"name":"餐饮空间设计","initial":"CYKJSJ","code":10084105}],"D":[{"id":6,"name":"大学英语4","initial":"DXYY4","code":13095302}],"F":[{"id":28,"name":"房地产销售","initial":"FDCXS","code":13085012},{"id":19,"name":"服饰文化","initial":"FSWH","code":13085006}],"G":[{"id":42,"name":"公共建筑设计","initial":"GGJZSJ","code":10014182},{"id":37,"name":"观赏植物","initial":"GSZW","code":10013473}]};
var test2 = new ShangShu.Course.Select(1, ‘test2‘,data);
test2.init();
</script>

 

JS代码：

var ShangShu = {};
ShangShu.Course = {};


ShangShu.Course.Select = function(SelectNum, targetId,sourceData)
{
　　var __self = this;
　　this.width = 500;
　　this.height = 200;
　　this.num = SelectNum; // 选择框编号，如果有多个input的时候必须由小到大的赋值，以免input覆盖div
　　this.TargetId = targetId; // 要操作的Input目标Id
　　this.SourceData = sourceData; // 课程数据列表
　　this.SelectDiv = document.createElement("div"); // 选择部分最外层Div
　　this.SelectId = document.createElement("input"); // 隐藏域用于记录所选择Id
　　this.InputObj = document.getElementById(this.TargetId); // 要操作的Input目标对象
　　this.SelectId.type = "hidden";
　　/**
　　* 初始化
　　* @param string targetId
　　* @param Json[] sourceData
　　*/
　　this.init = function()
　　{
　　　　this.SelectId.id = this.TargetId + "_id";

　　　　// 目标对象单击事件
　　　　this.InputObj.addEventListener(‘click‘, function() {
　　　　　　__self.div_show();
　　　　});
　　　　// 目标对象单击事件
　　　　this.InputObj.addEventListener(‘mouseover‘, function() {
　　　　　　__self.div_show();
　　　　});
　　　　// 目标对象失去焦点事件
　　　　this.InputObj.addEventListener(‘mouseout‘, function() {
　　　　　　//__self.div_hidden();
　　　　});
　　　　// 目标对象输入
　　　　this.InputObj.addEventListener(‘input‘, function() {
　　　　　　__self.init_data(this.value.toUpperCase());
　　　　});
　　　　//对展示框绑定事件
　　　　this.SelectDiv.addEventListener(‘mouseover‘,function(){
　　　　　　__self.div_show();
　　　　});
　　　　//对展示框绑定事件
　　　　this.SelectDiv.addEventListener(‘mouseout‘,function(){
　　　　//__self.div_hidden();
　　　　});　　

　　　　　　// 选择区初始化
　　　　this.init_data(‘‘); // 初始化数据
　　　　this.init_style(); // 初始化样式
　　　　this.init_click(); // 初始化单击事件
　　　　this.InputObj.after(this.SelectId);
　　　　this.SelectId.after(this.SelectDiv);

　　　　this.bindclick();
　　};
　　this.div_hidden = function(){
　　　　__self.SelectDiv.style.display = ‘none‘;
　　};
　　this.div_show = function (){
　　　　__self.SelectDiv.style.display = ‘‘;
　　};
 　/**
　　* 初始化单击事件
　　*/
　　this.init_click = function()
　　{
　　　　var Alist = this.SelectDiv.getElementsByTagName(‘p‘)[0].getElementsByTagName(‘a‘);
　　　　$.each(Alist,function(key,A){
　　　　　　A.addEventListener(‘mouseover‘,function(){
　　　　　　　　__self.click_a_over(A);
　　　　　　});
　　　　A.addEventListener(‘click‘,function(){
　　　　　　// TODO选择
　　　　　　__self.SelectLetter(A.innerHTML);
　　　　});
　　　　A.addEventListener(‘mouseout‘,function(){
　　　　　　__self.click_a_out(A);
　　　　});
　　　　});
　　};

/**
* 根据字母筛选内容
*/
this.SelectLetter = function (word)
{
var DivList = this.SelectDiv.getElementsByTagName(‘div‘)[0].getElementsByTagName(‘div‘);
$.each(DivList,function(key,div){
var DivId = __self.TargetId + "_body_" + word;
if (div.id.length == DivId.length)
{
if(div.id == (__self.TargetId + "_body_" + word))
{
div.style.display = ‘‘;
} else {
div.style.display = ‘none‘;
}
}
});
};

/**
* 定义展示框的样式
* @param {type} TargetObj
*/
this.init_style = function(TargetObj)
{
this.SelectDiv.style.position = "absolute";
this.InputObj.parentNode.style.zIndex = 99999999 - this.num;
this.InputObj.parentNode.style.position = "relative";

this.SelectDiv.style.display = ‘none‘;
this.SelectDiv.style.width = this.width + "px";
this.SelectDiv.style.height = this.height + "px";
this.SelectDiv.style.backgroundColor = "#ffffff";
this.SelectDiv.style.border = "1px solid #A3A3A3";
this.SelectDiv.style.borderColor = "#9ecaed";
this.SelectDiv.style.boxShadow = "0 0 10px #9ecaed";
};

/**
* 鼠标经过高亮
*/
this.click_a_over = function (TargetObj){
TargetObj.style.backgroundColor = ‘#9ecaed‘;
TargetObj.style.color = ‘#fff‘;
TargetObj.style.borderRadius = ‘3px‘;
};
this.click_a_out = function (TargetObj){
TargetObj.style.backgroundColor = ‘#fff‘;
TargetObj.style.color = ‘#000‘;
TargetObj.style.borderRadius = ‘0‘;
};

/**
* 初始化数据
*/
this.init_data = function (word)
{
if (word === ‘‘){
var datanew = sourceData;
} else {
var first = word.substr(0,1);
var datanew;
$.each(sourceData,function(key,val){
if (key === first){
datanew = {[key] : []}
var i = 0;
$.each(val,function(k,v){
var pinyin = v.initial;
if (pinyin.indexOf(word) === 0){
datanew[key][i] = v;
i++;
}
});
};
});
}
if (datanew !== undefined)
{
// 最上边的字母
if (word === ‘‘){
var title = ‘<p style="display:flex;justify-content:space-between;position:absolute;width:100%;background:#fff;overflow:hidden">‘;
} else {
var title = ‘‘;
}
var divheight = this.height - 25;
var divwidth = this.width - 80;
// 下面的显示主体
var html = ‘<div style="width:100%;height:‘+divheight+‘px;z-index:99999999;overflow-y:scroll;margin-top:24px;display:block">‘;
$.each(datanew,function(key,val){
var DivId = __self.TargetId + "_body_" + key;
if (word === ‘‘) title += ‘<a href="#‘+key+‘" style="color:#000;text-align:center;overflow:hidden;padding:2px;width:15px;cursor: pointer;">‘+key+‘</a>‘;
html += ‘<div id="‘ + DivId + ‘" style="clear: both;overflow:hidden">‘;
html += ‘    <div style="float:left;width:35px;text-align:center;color:orange;display: inline-block;">‘ + key + ‘</div>‘;
html += ‘    <div style="width:‘+divwidth+‘px;display: inline-block;float: left;">‘;
$.each(val,function(k,v){
html += ‘    <span style="width:189px;padding:2px 4px;margin: 0 4px;cursor: pointer;display:block;float: left;" wshid="‘+v.id+‘">‘ + v.name + ‘</span>‘;
});
html += ‘    </div>‘;
html += ‘</div>‘;
});
html += ‘</div>‘;
if (word === ‘‘) title += ‘</p>‘;
if (first !== undefined){
if (datanew[first].length === 0) html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>没有这个课程</b></span></div>‘;
}
} else {
var title = ‘‘;
var html = ‘<div style="text-align:center;line-height:168px"><span style="color:red;font-size:24px;"><b>没有这个课程</b></span></div>‘;
}
// 将html给到Div
this.SelectDiv.innerHTML = title+html;
};
this.bindclick = function (){
var spanobj = this.SelectDiv.getElementsByTagName(‘span‘);
$.each(spanobj,function(key,val){
var id = this.getAttribute(‘wshid‘);
var name = this.innerHTML;
val.addEventListener(‘click‘,function(){
__self.InputObj.value = name;
__self.SelectId.value = id;
});
});
};
};