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;}