123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- var selectName="",
- selectCode="";//选择数据
- function add_selected_fun(data,$id,name,code){
- var $body = $('body'),
- allData = data;
-
- selectName = $id.val().trim()
- selectCode = $id.attr('data-id')
- //取消
- function cancel(){
- $('.sel-bg').hide()
- $('.sel-main').hide()
- $('.sel-search').hide()
- $('#keyInput').val('')
- $body.off('click','.sel-ok')
- }
- function showData(data){
- var tmp=""
- $.map(data,function(item,index){
- if(item[code] == selectCode){
- tmp +='<li class="active" data-id="'+item[code]+'">'+item[name]+'</li>'
- }else{
- tmp +='<li data-id="'+item[code]+'">'+item[name]+'</li>'
- }
- })
- tmp +='<li></li><li></li>'
- return tmp
- }
-
- function initData(){
- showAllData()
- $('.sel-bg').show()
- $('.sel-search').show()
- $('.sel-main').show()
- }
-
- if($('ul.sel-list').length==0){
- var tmp1 = showData(allData)
- var html = '<div class="sel-bg"></div>\
- <div class="sel-search"><input id="keyInput" type="text" placeholder="关键字过滤"/></div>\
- <div class="sel-main">\
- <div class="sel-head"><div class="sel-cancel">取消</div><div class="sel-ok">确定</div></div>\
- <div class="sel-contain"><ul class="sel-list">'+tmp1+'</ul></div>\
- </div>'
- $body.prepend(html)
-
- $body.on('click','.sel-cancel',function(){
- cancel()
- })
-
- $body.on('click','.sel-bg',function(){
- cancel()
- })
-
- $body.on('click','.sel-list li',function(){
- var $li = $(this),
- $text = $li.text().trim(),
- $ul = $('.sel-list')
- if(!$text){
- return
- }
- if(!$li.hasClass('active')){
- $ul.find('li').removeClass('active')
- $li.addClass('active')
- selectName = $li.text()
- selectCode = $li.attr('data-id')
- }
- })
-
- $body.on('input','#keyInput',function(){
- var $data = $('#keyInput').val().trim()
- if(!$data){
- showAllData()
- }
- }).on('keydown',function(e) {
- var $data = $('#keyInput').val().trim()
- if($data && e.which === 13) {
- $('#keyInput').blur()
- filteData($data)
- }
- })
-
- $body.on('focus','#keyInput',function(){
- $('.sel-main').hide()
- })
- $body.on('blur','#keyInput',function(){
- setTimeout(function(){
- if($('.sel-bg').is(':visible')){
- $('.sel-main').show()
- }
- },500)
- })
- }
- //初始化
- initData()
-
- //过滤数据
- function filteData(key){
- var newArr = []
- $.map(allData,function(item,index){
- if(item[name].indexOf(key) > -1){
- newArr.push(item)
- }
- })
- var html = showData(newArr)
- $('.sel-list').empty().html(html)
- }
- //展示所有
- function showAllData(){
- var html = showData(allData)
- $('.sel-list').empty().html(html)
- }
- //重新绑定点击
- $body.on('click','.sel-ok',function(){
- $id.val(selectName)
- $id.attr('data-id',selectCode)
- cancel()
- })
- }
|