把插件放到:\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: david@hereapp.cn
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: david@hereapp.cn
// 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>