本文介绍了如何使用layui框架结合selectPage.js插件实现搜索功能，包括初始化配置、数据源设置、事件绑定等步骤，并提供了示例代码。
').addClass('sp_pagination').append('');
elem.results = $('').addClass(css.results);
var namePrefix = '_text',
input_id = elem.combo_input.attr('id') || elem.combo_input.attr('name'),
input_name = elem.combo_input.attr('name') || 'selectPage',
hidden_name = input_name,
hidden_id = input_id;
//switch the id and name attributes of input/hidden element
elem.hidden = $('').attr({
name: hidden_name,
id: hidden_id
}).val('');
elem.combo_input.attr({
name: input_name + namePrefix,
id: input_id + namePrefix
});
// 2. DOM element put
elem.container.append(elem.hidden);
if (p.dropButton) {
elem.container.append(elem.button)
elem.button.append(elem.dropdown);
}
$(document.body).append(elem.result_area);
elem.result_area.append(elem.results);
if (p.pagination) elem.result_area.append(elem.navi);
//Multiple select mode
if (p.multiple) {
if (p.multipleControlbar) {
elem.control.append('');
elem.control.append('');
elem.control.append('');
elem.control_text = $('
');
elem.control.append(elem.control_text);
elem.result_area.prepend(elem.control);
}
elem.container.addClass('sp_container_combo');
elem.combo_input.addClass('sp_combo_input').before(elem.element_box);
var li = $('
').addClass('input_box');
li.append(elem.combo_input);
elem.element_box.append(li);
if (elem.combo_input.attr('placeholder')) elem.combo_input.attr('placeholder_bak', elem.combo_input.attr('placeholder'));
}
this.elem = elem;
};
/**
* Drop down button set to default
*/
SelectPage.prototype.setButtonAttrDefault = function () {
/*
if (this.option.selectOnly) {
if ($(this.elem.combo_input).val() !== '') {
if ($(this.elem.hidden).val() !== '') {
//选择条件
$(this.elem.combo_input).attr('title', this.message.select_ok).removeClass(this.css_class.select_ng).addClass(this.css_class.select_ok);
} else {
//输入方式
$(this.elem.combo_input).attr('title', this.message.select_ng).removeClass(this.css_class.select_ok).addClass(this.css_class.select_ng);
}
} else {
$(this.elem.hidden).val('');
$(this.elem.combo_input).removeAttr('title').removeClass(this.css_class.select_ng);
}
}
*/
//this.elem.button.attr('title', this.message.get_all_btn);
if (this.option.dropButton)
this.elem.button.attr('title', this.message.close_btn);
};
/**
* Set item need selected after init
* set selected item ways:
*
*
*/
SelectPage.prototype.setInitRecord = function (refresh) {
var self = this, p = self.option, el = self.elem, key = '';
if ($.type(el.combo_input.data('init')) != 'undefined')
p.initRecord = String(el.combo_input.data('init'));
//data-init and value attribute can be init plugin selected item
//but, if set data-init and value attribute in the same time, plugin will choose data-init attribute first
if (!refresh && !p.initRecord && el.combo_input.val())
p.initRecord = el.combo_input.val();
el.combo_input.val('');
if (!refresh) el.hidden.val(p.initRecord);
key = refresh && el.hidden.val() ? el.hidden.val() : p.initRecord;
if (key) {
if (typeof p.data === 'object') {
var data = new Array();
var keyarr = key.split(',');
$.each(keyarr, function (index, row) {
for (var i = 0; i < p.data.length; i++) {
if (p.data[i][p.keyField] == row) {
data.push(p.data[i]);
break;
}
}
});
if (!p.multiple && data.length > 1) data = [data[0]];
self.afterInit(self, data);
} else {//ajax data source mode to init selected item
$.ajax({
dataType: 'json',
type: 'POST',
url: p.data,
data: {
searchTable: p.dbTable,
searchKey: p.keyField,
searchValue: key
},
success: function (json) {
var d = null;
if (p.eAjaxSuccess && $.isFunction(p.eAjaxSuccess))
d = p.eAjaxSuccess(json);
self.afterInit(self, d.list);
},
error: function (jqXHR, textStatus, errorThrown) {
self.ajaxErrorNotify(self, errorThrown);
}
});
}
}
};
/**
* Selected item set to plugin
* @param {Object} self
* @param {Object} data - selected item data
*/
SelectPage.prototype.afterInit = function (self, data) {
if (!data || ($.isArray(data) && data.length === 0)) return;
if (!$.isArray(data)) data = [data];
var p = self.option, css = self.css_class;
var getText = function (row) {
var text = row[p.showField];
if (p.formatItem && $.isFunction(p.formatItem)) {
try {
text = p.formatItem(row);
} catch (e) {
}
}
return text;
};
if (p.multiple) {
self.prop.init_set = true;
self.clearAll(self);
$.each(data, function (i, row) {
var item = {text: getText(row), value: row[p.keyField]};
if (!self.isAlreadySelected(self, item)) self.addNewTag(self, item);
});
self.tagValuesSet(self);
self.inputResize(self);
self.prop.init_set = false;
} else {
var row = data[0];
self.elem.combo_input.val(getText(row));
self.elem.hidden.val(row[p.keyField]);
self.prop.prev_value = getText(row);
self.prop.selected_text = getText(row);
if (p.selectOnly) {
self.elem.combo_input.attr('title', self.message.select_ok).removeClass(css.select_ng).addClass(css.select_ok);
}
self.putClearButton();
}
};
/**
* Drop down button event bind
*/
SelectPage.prototype.eDropdownButton = function () {
var self = this;
if (self.option.dropButton) {
self.elem.button.mouseup(function (ev) {
ev.stopPropagation();
if (self.elem.result_area.is(':hidden') && !self.elem.combo_input.prop('disabled')) {
self.elem.combo_input.focus();
} else self.hideResults(self);
});
}
};
/**
* Events bind
*/
SelectPage.prototype.eInput = function () {
var self = this, p = self.option, el = self.elem, msg = self.message;
var showList = function () {
self.prop.page_move = false;
self.suggest(self);
self.setCssFocusedInput(self);
};
el.combo_input.keyup(function (e) {
self.processKey(self, e);
}).keydown(function (e) {
self.processControl(self, e);
}).focus(function (e) {
//When focus on input, show the result list
if (el.result_area.is(':hidden')) {
e.stopPropagation();
self.prop.first_show = true;
showList();
}
});
el.container.on('click.SelectPage', 'div.' + self.css_class.clear_btn, function (e) {
e.stopPropagation();
if (!self.disabled(self)) {
self.clearAll(self);
if (p.eClear && $.isFunction(p.eClear)) p.eClear(self);
}
});
el.result_area.on('mousedown.SelectPage', function (e) {
e.stopPropagation();
});
if (p.multiple) {
if (p.multipleControlbar) {
//Select all item of current page
el.control.find('.sp_select_all').on('click.SelectPage', function (e) {
self.selectAllLine(self);
}).hover(function () {
el.control_text.html(msg.select_all);
}, function () {
el.control_text.html('');
});
//Cancel select all item of current page
el.control.find('.sp_unselect_all').on('click.SelectPage', function (e) {
self.unSelectAllLine(self);
}).hover(function () {
el.control_text.html(msg.unselect_all);
}, function () {
el.control_text.html('');
});
//Clear all selected item
el.control.find('.sp_clear_all').on('click.SelectPage', function (e) {
self.clearAll(self);
}).hover(function () {
el.control_text.html(msg.clear_all);
}, function () {
el.control_text.html('');
});
}
el.element_box.on('click.SelectPage', function (e) {
var srcEl = e.target || e.srcElement;
if ($(srcEl).is('ul')) el.combo_input.focus();
});
//Tag close
el.element_box.on('click.SelectPage', 'span.tag_close', function () {
var li = $(this).closest('li');
self.removeTag(self, li);
showList();
if (p.eTagRemove && $.isFunction(p.eTagRemove))
p.eTagRemove(1, self);
});
self.inputResize(self);
}
};
/**
* Out of plugin area click event handler
*/
SelectPage.prototype.eWhole = function () {
var self = this, css = self.css_class;
var cleanContent = function (obj) {
obj.elem.combo_input.val('');
if (!obj.option.multiple) obj.elem.hidden.val('');
obj.prop.selected_text = '';
};
//Out of plugin area
$(document.body).off('mousedown.selectPage').on('mousedown.selectPage', function (e) {
var ele = e.target || e.srcElement;
var sp = $(ele).closest('div.' + css.container);
//Open status result list
$('div.' + css.container + '.' + css.container_open).each(function () {
if (this == sp[0]) return;
var $this = $(this), d = $this.find('input.' + css.input).data(SelectPage.dataKey);
if (!d.elem.combo_input.val() && d.elem.hidden.val() && !d.option.multiple) {
d.prop.current_page = 1;//reset page to 1
cleanContent(d);
d.hideResults(d);
return true;
}
if (d.elem.results.find('li').not('.' + css.message_box).size()) {
if (d.option.autoFillResult) {
//have selected item, then hide result list
if (d.elem.hidden.val()) d.hideResults(d);
else if (d.elem.results.find('li.sp_over').size()) {
//no one selected and have highlight item, select the highlight item
d.selectCurrentLine(d, true);
} else if (d.option.autoSelectFirst) {
//no one selected, no one highlight, select the first item
d.nextLine(d);
d.selectCurrentLine(d, true);
} else d.hideResults(d);
} else d.hideResults(d);
} else {
//when no one item match, clear search keywords
if (d.option.noResultClean) cleanContent(d);
else {
if (!d.option.multiple) d.elem.hidden.val('');
}
d.hideResults(d);
}
});
});
};
/**
* Result list event bind
*/
SelectPage.prototype.eResultList = function () {
var self = this, css = this.css_class;
self.elem.results.children('li').hover(function () {
if (self.prop.key_select) {
self.prop.key_select = false;
return;
}
if (!$(this).hasClass(css.selected) && !$(this).hasClass(css.message_box)) {
$(this).addClass(css.select);
self.setCssFocusedResults(self);
}
}, function () {
$(this).removeClass(css.select);
}).click(function (e) {
if (self.prop.key_select) {
self.prop.key_select = false;
return;
}
e.preventDefault();
e.stopPropagation();
if (!$(this).hasClass(css.selected)) self.selectCurrentLine(self, false);
});
};
/**
* Reposition result list when list beyond the visible area
*/
SelectPage.prototype.eScroll = function () {
var self = this, css = this.css_class;
$(window).on('scroll.SelectPage', function (e) {
$('div.' + css.container + '.' + css.container_open).each(function () {
var $this = $(this), d = $this.find('input.' + css.input).data(SelectPage.dataKey),
offset = d.elem.result_area.offset(),
screenScrollTop = $(window).scrollTop(),
docHeight = $(document).height(),
viewHeight = $(window).height(),
listHeight = d.elem.result_area.outerHeight(),
listBottom = offset.top + listHeight,
hasOverflow = docHeight > viewHeight,
down = d.elem.result_area.hasClass('shadowDown');
if (hasOverflow) {
if (down) {//open down
if (listBottom > (viewHeight + screenScrollTop)) d.calcResultsSize(d);
} else {//open up
if (offset.top < screenScrollTop) d.calcResultsSize(d);
}
}
});
});
};
/**
* Page bar button event bind
*/
SelectPage.prototype.ePaging = function () {
var self = this;
if (!self.option.pagination) return;
self.elem.navi.find('li.csFirstPage').off('click').on('click', function (ev) {
//$(self.elem.combo_input).focus();
ev.preventDefault();
self.firstPage(self);
});
self.elem.navi.find('li.csPreviousPage').off('click').on('click', function (ev) {
//$(self.elem.combo_input).focus();
ev.preventDefault();
self.prevPage(self);
});
self.elem.navi.find('li.csNextPage').off('click').on('click', function (ev) {
//$(self.elem.combo_input).focus();
ev.preventDefault();
self.nextPage(self);
});
self.elem.navi.find('li.csLastPage').off('click').on('click', function (ev) {
//$(self.elem.combo_input).focus();
ev.preventDefault();
self.lastPage(self);
});
};
/**
* Ajax request fail
* @param {Object} self
* @param {string} errorThrown
*/
SelectPage.prototype.ajaxErrorNotify = function (self, errorThrown) {
self.showMessage(self.message.ajax_error);
};
/**
* Message box
* @param {Object} self
* @param msg {string} the text need to show
*/
SelectPage.prototype.showMessage = function (self, msg) {
if (!msg) return;
var msgLi = '
' + msg + '';
self.elem.results.empty().append(msgLi).show();
self.calcResultsSize(self);
self.setOpenStatus(self, true);
self.elem.control.hide();
if (self.option.pagination) self.elem.navi.hide();
};
/**
* @desc Scroll
* @param {Object} self
* @param {boolean} enforce
*/
SelectPage.prototype.scrollWindow = function (self, enforce) {
var current_result = self.getCurrentLine(self),
target_top = (current_result && !enforce) ? current_result.offset().top : self.elem.container.offset().top,
target_size;
self.prop.size_li = self.elem.results.children('li:first').outerHeight();
target_size = self.prop.size_li;
var gap, client_height = $(window).height(),
scroll_top = $(window).scrollTop(),
scroll_bottom = scroll_top + client_height - target_size;
if (current_result.length) {
if (target_top < scroll_top || target_size > client_height) {
//scroll to top
gap = target_top - scroll_top;
} else if (target_top > scroll_bottom) {
//scroll down
gap = target_top - scroll_bottom;
} else return; //do not scroll
} else if (target_top < scroll_top) gap = target_top - scroll_top;
window.scrollBy(0, gap);
};
/**
* change css class by status
* @param self
* @param status {boolean} true: open, false: close
*/
SelectPage.prototype.setOpenStatus = function (self, status) {
var el = self.elem, css = self.css_class;
if (status) {
el.container.addClass(css.container_open);
el.result_area.addClass(css.result_open);
} else {
el.container.removeClass(css.container_open);
el.result_area.removeClass(css.result_open);
}
};
/**
* input element in focus css class set
* @param {Object} self
*/
SelectPage.prototype.setCssFocusedInput = function (self) {
//$(self.elem.results).addClass(self.css_class.re_off);
//$(self.elem.combo_input).removeClass(self.css_class.input_off);
};
/**
* set result list get focus and input element lost focus
* @param {Object} self
*/
SelectPage.prototype.setCssFocusedResults = function (self) {
//$(self.elem.results).removeClass(self.css_class.re_off);
//$(self.elem.combo_input).addClass(self.css_class.input_off);
};
/**
* Quick search input keywords listener
* @param {Object} self
*/
SelectPage.prototype.checkValue = function (self) {
var now_value = self.elem.combo_input.val();
if (now_value != self.prop.prev_value) {
self.prop.prev_value = now_value;
self.prop.first_show = false;
if (self.option.selectOnly) self.setButtonAttrDefault();
if (!self.option.multiple && !now_value) {
self.elem.combo_input.val('');
self.elem.hidden.val('');
self.elem.clear_btn.remove();
}
self.suggest(self);
}
};
/**
* Input handle(regular input)
* @param {Object} self
* @param {Object} e - event object
*/
SelectPage.prototype.processKey = function (self, e) {
if ($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9, 13]) === -1) {
if (e.keyCode != 16) self.setCssFocusedInput(self); // except Shift(16)
self.inputResize(self);
if ($.type(self.option.data) === 'string') {
self.prop.last_input_time = e.timeStamp;
setTimeout(function () {
if ((e.timeStamp - self.prop.last_input_time) === 0)
self.checkValue(self);
}, self.option.inputDelay * 1000);
} else {
self.checkValue(self);
}
}
}
/**
* Input handle(control key)
* @param {Object} self
* @param {Object} e - event object
*/
SelectPage.prototype.processControl = function (self, e) {
if (($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9]) > -1 && self.elem.result_area.is(':visible')) ||
($.inArray(e.keyCode, [13, 9]) > -1 && self.getCurrentLine(self))) {
e.preventDefault();
e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
switch (e.keyCode) {
case 37:// left
if (e.shiftKey) self.firstPage(self);
else self.prevPage(self);
break;
case 38:// up
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
