6.0 给系统下拉框增加搜索功能

其他 2018-06-13 16:07:36 阅读次数: 1

把插件放到：\app\system\include\public\searchableSelect文件下


引用三个文件：

<script src="{$_M['url']['pub']}searchableSelect/jquery-1.11.1.min.js"></script>
<script src="{$_M['url']['pub']}searchableSelect/jquery.searchableSelect.js"></script>

<link rel="stylesheet" href="{$_M['url']['pub']}searchableSelect/jquery.searchableSelect.css">



jquery.searchableSelect.css

/*
Author: David Qin
E-mail: [email protected]
Date: 2014-11-05
*/

.searchable-select-hide {
  display: none;
}

.searchable-select {
  display: inline-block;
  min-width: 200px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  vertical-align: middle;
  position: relative;
  outline: none;
	z-index: 9999;
}

.searchable-select-holder{
  padding: 6px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 30px;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.searchable-select-caret {
  position: absolute;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-color: black transparent transparent transparent;
  top: 0;
  bottom: 0;
  border-style: solid;
  border-width: 5px;
  margin: auto;
  right: 10px;
}

.searchable-select-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 4px;
  border-top: none;
  top: 28px;
  left: 0;
  right: 0;
}

.searchable-select-input {
  margin-top: 5px;
  border: 1px solid #ccc;
  outline: none;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  width: 100%;
}

.searchable-scroll {
  margin-top: 4px;
  position: relative;
}

.searchable-scroll.has-privious {
  padding-top: 16px;
}

.searchable-scroll.has-next {
  padding-bottom: 16px;
}

.searchable-has-privious {
  top: 0;
}

.searchable-has-next {
  bottom: 0;
}

.searchable-has-privious, .searchable-has-next {
  height: 16px;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  z-index: 10;
  background-color: white;
  line-height: 8px;
  cursor: pointer;
}

.searchable-select-items {
  max-height: 400px;
  overflow-y: scroll;
  position: relative;
}

.searchable-select-items::-webkit-scrollbar {
  display: none;
}

.searchable-select-item {
  padding: 5px 5px;
  cursor: pointer;
  min-height: 30px;
  box-sizing: border-box;
    transition: all 1s ease 0s;
}

.searchable-select-item.hover {

  background: #555;
  color: white;
}

.searchable-select-item.selected {
  background: #28a4c9;
  color: white;
}

jquery-1.11.1.min.js（可以引用其它的）


jquery.searchableSelect.js

// Author: David Qin
// E-mail: [email protected]
// Date: 2014-11-05
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg);  //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
} 

(function($){

  // a case insensitive jQuery :contains selector
  $.expr[":"].searchableSelectContains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });

  $.searchableSelect = function(element, options) {
    this.element = element;
    this.options = options || {};
    this.init();

    var _this = this;

    this.searchableElement.click(function(event){
      // event.stopPropagation();
      _this.show();
    }).on('keydown', function(event){
      if (event.which === 13 || event.which === 40 || event.which == 38){
        event.preventDefault();
        _this.show();
      }
    });

    $(document).on('click', null, function(event){
      if(_this.searchableElement.has($(event.target)).length === 0)
        _this.hide();
    });

    this.input.on('keydown', function(event){
      event.stopPropagation();
      if(event.which === 13){         //enter
        event.preventDefault();
        _this.selectCurrentHoverItem();
        _this.hide();
      } else if (event.which == 27) { //ese
        _this.hide();
      } else if (event.which == 40) { //down
        _this.hoverNextItem();
      } else if (event.which == 38) { //up
        _this.hoverPreviousItem();
      }
    }).on('keyup', function(event){
      if(event.which != 13 && event.which != 27 && event.which != 38 && event.which != 40)
        _this.filter();
    })
  }

  var $sS = $.searchableSelect;

  $sS.fn = $sS.prototype = {
    version: '0.0.1'
  };

  $sS.fn.extend = $sS.extend = $.extend;

  $sS.fn.extend({
    init: function(){
      var _this = this;
      this.element.hide();

      this.searchableElement = $('<div tabindex="0" class="searchable-select"></div>');
      this.holder = $('<div class="searchable-select-holder" id="searchableid"></div>');
      this.dropdown = $('<div class="searchable-select-dropdown searchable-select-hide"></div>');
      this.input = $('<input type="text" class="searchable-select-input" />');
      this.items = $('<div class="searchable-select-items"></div>');
      this.caret = $('<span class="searchable-select-caret"></span>');

      this.scrollPart = $('<div class="searchable-scroll"></div>');
      this.hasPrivious = $('<div class="searchable-has-privious">...</div>');
      this.hasNext = $('<div class="searchable-has-next">...</div>');

      this.hasNext.on('mouseenter', function(){
        _this.hasNextTimer = null;

        var f = function(){
          var scrollTop = _this.items.scrollTop();
          _this.items.scrollTop(scrollTop + 20);
          _this.hasNextTimer = setTimeout(f, 50);
        }

        f();
      }).on('mouseleave', function(event) {
        clearTimeout(_this.hasNextTimer);
      });

      this.hasPrivious.on('mouseenter', function(){
        _this.hasPriviousTimer = null;

        var f = function(){
          var scrollTop = _this.items.scrollTop();
          _this.items.scrollTop(scrollTop - 20);
          _this.hasPriviousTimer = setTimeout(f, 50);
        }

        f();
      }).on('mouseleave', function(event) {
        clearTimeout(_this.hasPriviousTimer);
      });

      this.dropdown.append(this.input);
      this.dropdown.append(this.scrollPart);

      this.scrollPart.append(this.hasPrivious);
      this.scrollPart.append(this.items);
      this.scrollPart.append(this.hasNext);

      this.searchableElement.append(this.caret);
      this.searchableElement.append(this.holder);
      this.searchableElement.append(this.dropdown);
      this.element.after(this.searchableElement);

      this.buildItems();
      this.setPriviousAndNextVisibility();
    },

    filter: function(){
      var text = this.input.val();
      this.items.find('.searchable-select-item').addClass('searchable-select-hide');
      this.items.find('.searchable-select-item:searchableSelectContains('+text+')').removeClass('searchable-select-hide');
      if(this.currentSelectedItem.hasClass('searchable-select-hide') && this.items.find('.searchable-select-item:not(.searchable-select-hide)').length > 0){
        this.hoverFirstNotHideItem();
      }

      this.setPriviousAndNextVisibility();
    },

    hoverFirstNotHideItem: function(){
      this.hoverItem(this.items.find('.searchable-select-item:not(.searchable-select-hide)').first());
    },

    selectCurrentHoverItem: function(){
      if(!this.currentHoverItem.hasClass('searchable-select-hide'))
        this.selectItem(this.currentHoverItem);
    },

    hoverPreviousItem: function(){
      if(!this.hasCurrentHoverItem())
        this.hoverFirstNotHideItem();
      else{
        var prevItem = this.currentHoverItem.prevAll('.searchable-select-item:not(.searchable-select-hide):first')
        if(prevItem.length > 0)
          this.hoverItem(prevItem);
      }
    },

    hoverNextItem: function(){
      if(!this.hasCurrentHoverItem())
        this.hoverFirstNotHideItem();
      else{
        var nextItem = this.currentHoverItem.nextAll('.searchable-select-item:not(.searchable-select-hide):first')
        if(nextItem.length > 0)
          this.hoverItem(nextItem);
      }
    },

    buildItems: function(){
      var _this = this;
      this.element.find('option').each(function(){
        var item = $('<div class="searchable-select-item" data-value="'+$(this).attr('value')+'">'+$(this).text()+'</div>');

        if(this.selected){
          _this.selectItem(item);
          _this.hoverItem(item);
        }

        item.on('mouseenter', function(){
          $(this).addClass('hover');
        }).on('mouseleave', function(){
          $(this).removeClass('hover');
        }).click(function(event){
          event.stopPropagation();
          _this.selectItem($(this));
          _this.hide();
        });

        _this.items.append(item);
      });

      this.items.on('scroll', function(){
        _this.setPriviousAndNextVisibility();
      })
    },
    show: function(){
      this.dropdown.removeClass('searchable-select-hide');
      this.input.focus();
      this.status = 'show';
      this.setPriviousAndNextVisibility();
    },

    hide: function(){
      if(!(this.status === 'show'))
        return;

      if(this.items.find(':not(.searchable-select-hide)').length === 0)
          this.input.val('');
      this.dropdown.addClass('searchable-select-hide');
      this.searchableElement.trigger('focus');
      this.status = 'hide';
			//alert("返回"); 
      //this.currentSelectedItem = item;;
			 //self.location='c1.htm?id=11';
    },

    hasCurrentSelectedItem: function(){
      return this.currentSelectedItem && this.currentSelectedItem.length > 0;
    },

    selectItem: function(item){
      if(this.hasCurrentSelectedItem())
        this.currentSelectedItem.removeClass('selected');

      this.currentSelectedItem = item;
      item.addClass('selected');

      this.hoverItem(item);

      this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);
			
			//下拉框
			//var url = window.location.href;
			    //url=$.trim(url);
					url="/admin/index.php?lang=cn&anyid=44&n=examination&c=examination&a="+getUrlParam("a");
			//试卷推送
			var starttime=$("#starttime").val();
			if(starttime){
				 starttime='&starttime='+starttime;
			}else{
				 starttime='';
			}
			var endtime=$("#endtime").val();
			if(endtime){
				 endtime='&endtime='+endtime;
			}else{
				 endtime='';
			}
			var number=$("#number").val();
			if(number){
				 number=$.trim(number);
				 number='&number='+number;
			}else{
				 number='';
			}
			var teachers_id=$("#teachers_id").val();
			if(teachers_id){
				  teachers_id=$.trim(teachers_id);
          teachers_id='&teachers_id='+teachers_id;
			}else{
				 teachers_id='';
			}
			var search_title=$("#search_title").val();
			if(search_title){
				  search_title=$.trim(search_title);
          search_title='&search_title='+search_title;
			}else{
				  search_title='';
			}
			if(item.text()){
				  title1=item.text();
				  title11=$.trim(title1);
					teachers_title='&teachers_title='+title11;
			}else{
				  teachers_title='';
			}
			//推送记录
			var eid=$("#eid").val();
			if(eid){
				 eid=$.trim(eid);
				 eid='&eid='+eid;
			}else{
				  eid='';
			}
			var uid=$("#uid").val();
			if(uid){
				 uid=$.trim(uid);
				 uid='&uid='+uid;
			}else{
				 uid='';
			}
			if(item.data('value')){
			    //self.location=url+starttime+endtime+number;
				  self.location=url+starttime+endtime+number+teachers_id+search_title+teachers_title+eid+uid;
				  //self.location='/admin/index.php?lang=cn&anyid=44&n=examination&c=examination&a=do_user_test&teachers_id='+teachers_id+'&starttime='+starttime+'&endtime='+endtime+'&number='+number+'&search_title='+search_title+'&teachers_title='+item.text();
			}
			
      if(this.options.afterSelectItem){
        this.options.afterSelectItem.apply(this);
				
      }
    },

    hasCurrentHoverItem: function(){
      return this.currentHoverItem && this.currentHoverItem.length > 0;
    },

    hoverItem: function(item){
      if(this.hasCurrentHoverItem())
        this.currentHoverItem.removeClass('hover');

      if(item.outerHeight() + item.position().top > this.items.height())
        this.items.scrollTop(this.items.scrollTop() + item.outerHeight() + item.position().top - this.items.height());
      else if(item.position().top < 0)
        this.items.scrollTop(this.items.scrollTop() + item.position().top);

      this.currentHoverItem = item;
      item.addClass('hover');
    },

    setPriviousAndNextVisibility: function(){
      if(this.items.scrollTop() === 0){
        this.hasPrivious.addClass('searchable-select-hide');
        this.scrollPart.removeClass('has-privious');
				//self.location='a.htm'; 
      } else {
        this.hasPrivious.removeClass('searchable-select-hide');
        this.scrollPart.addClass('has-privious');
				//self.location='b.htm'; 
      }

      if(this.items.scrollTop() + this.items.innerHeight() >= this.items[0].scrollHeight){
        this.hasNext.addClass('searchable-select-hide');
        this.scrollPart.removeClass('has-next');
				//self.location='c1.htm'; 
      } else {
        this.hasNext.removeClass('searchable-select-hide');
        this.scrollPart.addClass('has-next');
				//self.location='c2.htm'; 
      }
    }
  });

  $.fn.searchableSelect = function(options){
    this.each(function(){
      var sS = new $sS($(this), options);
			
    });

    return this;
  };

})(jQuery);

重点：

     this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);

//下拉框
//var url = window.location.href;
   //url=$.trim(url);
url="/admin/index.php?lang=cn&anyid=44&n=examination&c=examination&a="+getUrlParam("a");
//试卷推送
var starttime=$("#starttime").val();
if(starttime){
starttime='&starttime='+starttime;
}else{
starttime='';
}
var endtime=$("#endtime").val();
if(endtime){
endtime='&endtime='+endtime;
}else{
endtime='';
}
var number=$("#number").val();
if(number){
number=$.trim(number);
number='&number='+number;
}else{
number='';
}
var teachers_id=$("#teachers_id").val();
if(teachers_id){
 teachers_id=$.trim(teachers_id);
          teachers_id='&teachers_id='+teachers_id;
}else{
teachers_id='';
}
var search_title=$("#search_title").val();
if(search_title){
 search_title=$.trim(search_title);
          search_title='&search_title='+search_title;
}else{
 search_title='';
}
if(item.text()){
 title1=item.text();
 title11=$.trim(title1);
teachers_title='&teachers_title='+title11;
}else{
 teachers_title='';
}
//推送记录
var eid=$("#eid").val();
if(eid){
eid=$.trim(eid);
eid='&eid='+eid;
}else{
 eid='';
}
var uid=$("#uid").val();
if(uid){
uid=$.trim(uid);
uid='&uid='+uid;
}else{
uid='';
}
if(item.data('value')){
   //self.location=url+starttime+endtime+number;
 self.location=url+starttime+endtime+number+teachers_id+search_title+teachers_title+eid+uid;
 //self.location='/admin/index.php?lang=cn&anyid=44&n=examination&c=examination&a=do_user_test&teachers_id='+teachers_id+'&starttime='+starttime+'&endtime='+endtime+'&number='+number+'&search_title='+search_title+'&teachers_title='+item.text();
}


系统模板上代码：

								<select name="teachers_id" id="teachers_id" data-table-search="1" data-checked="{$teachersid}">
									<option value="">选择讲师的学生</option>
<!--
EOT;
if($admin_group==9){//9老师
 $wh=" where id='$teachersid'";
}
$t_list=DB::get_all("SELECT id,title,user_id FROM ".$_M['table']['my_teacher']." $wh ORDER BY id DESC");//取出标题
foreach($t_list as $key=>$valt){
echo <<<EOT
-->
									<option value="{$valt['id']}">{$valt['title']}</option>
<!--
EOT;
}
echo <<<EOT
-->
								</select>


    <script>
		$(function(){
			$('#teachers_id').searchableSelect();
		});
    </script>


猜你喜欢

转载自blog.csdn.net/haibo0668/article/details/80519847
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022