js下拉菜單生成器dropMenu使用方法詳解

<div class="input-group">
 　　<span class="input-group-addon" style="width: 100px" >職級：</span>
 <input type="text" class="units form-control" id="jobTitle" value="其他" style="border-radius:0 4px 4px 0;"></input>
 <span class="caret beside"></span>
</div>

$(function(){
 var title,
 populationType,
 titleInParty;
 $.ajax({
 url:'/api/v1/user/getUserTypeInfo',
 type:'GET',
 dataType:'json',
 success:function (data) {
 title=data.data.title;
 titleInParty=data.data.titleInParty;
 populationType=data.data.populationType;
 partyLabel('jobTitle',title);
 partyLabel('populationType',populationType);
 partyLabel('titleInParty',titleInParty);
 }
 });

function partyLabel(menuID,data){
 new DropMeun({
 'id':menuID,
 "data":data,
 "dataSrc":"name", //數據是下面的這種格式的，你要的是name的值
 "ableSearch":true, //可以搜索
 "style":{ //樣式，可選
 "width":173,
 "maxHeight":200,
 "left":0, //定位到哪里
 "top":5,
 "initPos":"left" //設置在哪邊出現
 }
 })
 }

(function(vq0599) {
 window.DropMeun = vq0599
})(function() {

 /*-- tools --*/

 function getRealTop(node) {
 return node.offsetParent.tagName.toUpperCase() === 'BODY' ?
 node.offsetTop :
 node.offsetTop + arguments.callee(node.offsetParent)
 }

 function getRealLeft(node) {
 return node.offsetParent.tagName.toUpperCase() === 'BODY' ?
 node.offsetLeft :
 node.offsetLeft + arguments.callee(node.offsetParent)
 }

 /*-- tools end--*/


 function DropMeun(option) {
 this.picker = null
 this.self = null
 this.option = option
 this.item = option.item || []
 this.style = option.style || {}
 this.dataList = option.data || []

 this.init()
 return this;
 }

 DropMeun.prototype.init = function () {
 var html = '',
 _this = this

 this.self = document.createElement('ul')
 this.picker = document.getElementById(this.option.id)

 if (! this.picker) {
 throw 'picker is null, making sure that picker\'s ID \''+ this.option.id +'\' is correct'
 return
 }


 if (this.option.ableSearch) {
 html += '<li><input class="dropMeun-searchInput" type="text"></li>'
 }

 this.dataList.forEach(function(data, index) {
 var item = _this.option.dataSrc ? data[_this.option.dataSrc] : data,
 content = _this.item.render ? _this.item.render(item, data) : item

 html += '<li class="dropMeun-item '+ (_this.item.className || '') +'" data-index="'+ index +'">'+ content +'</li>'
 })

 this.self.classList.add('dropMeun')
 this.self.innerHTML = html
 document.body.appendChild(this.self)

 this.setStyle()
 this.bindEvent()
 }

 DropMeun.prototype.setStyle = function() {

 this.self.style.width =
 this.style.width ?
 (parseInt(this.style.width) - 26) + 'px' :
 '150px'

 this.self.style.maxHeight =
 this.style.maxHeight ?
 (parseInt(this.style.maxHeight) - 26) + 'px' :
 '300px'

 var w = getRealLeft(this.picker) + (parseInt(this.style.left) || 0)
 var h = getRealTop(this.picker) + this.picker.offsetHeight + (parseInt(this.style.top) || 0)

 var realWidth = parseInt(this.self.style.width) + 26 // 26 = dobule(padding + border)

 if (this.style.initPos === 'right') {
 w = w - realWidth + this.picker.offsetWidth
 }

 this.self.style.top = h + 'px'
 this.self.style.left = w + 'px'

 }

 DropMeun.prototype.bindEvent = function() {
 var

 _this = this,
 iEvent = this.picker.nodeName.toUpperCase() !== 'INPUT' ?
 'click' :
 this.picker.type.toUpperCase() === 'TEXT' ?
 'focus' : 'click'

 this.picker.addEventListener('click', function(ev) {
 var ev = ev || window.ev
 ev.stopPropagation()
 })

 //
 this.picker.addEventListener(iEvent, function(ev) {

 document.body.click() // 觸發 window.click 使其他dropMeun關閉

 _this.self.style.display = 'block'
 })

 //
 window.addEventListener('click', function() {
 _this.self.style.display = 'none'
 })

 //
 this.self.addEventListener('click', function(ev) {
 var ev = ev || window.ev
 ev.stopPropagation()

 // 事件委托 item點擊
 if (ev.target.classList.contains('dropMeun-item')) {
 var index = parseInt(ev.target.getAttribute('data-index'))
 data = _this.option.dataSrc ?
 _this.dataList[index][_this.option.dataSrc] :
 _this.dataList[index]


 if (iEvent === 'focus') {
 _this.picker.value = ev.target.innerText
 }

 if (_this.item.callbakc) {
 _this.item.callbakc(data, _this.picker, _this.dataList[index], _this.dataList)
 }

 _this.self.style.display = 'none'
 }
 })
 //
 if (_this.option.ableSearch) {

 _this.searchInput = _this.self.getElementsByClassName('dropMeun-searchInput')[0]

 _this.searchInput.addEventListener('keyup', function() {
 var target = this.value.trim(),
 items = _this.self.getElementsByClassName('dropMeun-item');

 [].slice.call(items).forEach(function(item, index) {
 item.style.display =
 item.innerText.indexOf(target) === -1 ?
 'none' : ''
 })

 })
 }
 }

 return DropMeun
}())

ul,
li {
 list-style: none;
 margin: 0;
 padding: 0;
}

.dropMeun {
 position: absolute;
 border: 1px solid #ccc;
 overflow: auto;
 padding: 8px 12px;
 box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 background-color: #fff;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 box-sizing: content-box;
 display: none;
}

.dropMeun li.dropMeun-item {
 min-width: 150px;
 padding: 2px 2px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.dropMeun li.dropMeun-item:hover {
 cursor: pointer;
 background-color: rgba(238, 238, 238, 0.8);
}

.dropMeun-searchInput {
 outline: none;
 width: 100%;
 box-sizing: border-box;
}