搜索下拉框介绍
以CSDN下拉菜单反馈性关键词是用户在搜索时与搜索引擎
的第一步互动,在互动过程中,搜索引擎的反馈关键词不断调整来满足用户的个性需求!
下面也可以通过jQuery的库进行实现,后台仅需要提供一个查询的接口给我们前端即可完成,前端也不需要自己再重写令人烦心的样式。如果后台返回的数据没有分页或者固定多少条,我们需要拿到数据后截取10条-15条进行展示!
使用背景
在一个移动端项目需要做一个搜索下拉框的功能,该技术选型是jQuery,而并非Vue,这样有些Vue封装好的第三方库就无法实现了,我这边找到了一个基于jQuery的第三方可以实现搜索下拉框
的功能,后台只需要提供一个查询接口即可实现类似CSDN的搜索框功能,设置好分页数据,默认拿到的数据就是第一页的前10条数据,每一次输入搜索关键字均可以再一次返回新的数据。类似csdn这样的效果。(全文需要先引入jQuery才可进行操作,全文需要先引入jQuery才可进行操作,全文需要先引入jQuery才可进行操作)
使用的库的代码
可下列代码直接复制到一个空的js文件(文件的命名随意吧),然后引入到数据当中,内部动态生成的CSS样式可根据自己所需要的业务进行修改,比如背景色,字体大小,行间距
等!通过本篇博客记录自己在解决’搜索下拉框’问题的办法,也希望能帮助到您噢!(下述代码还可以进行优化,我的项目中并非使用的该代码),项目中的代码最后使用了js的防抖和节流
,若有不懂JavaScript的防抖和节流可以浏览完该博客后点击该连接跳转到js的防抖和节流博文进行阅读了解!
该js支持PC端和mobile端!
(function($) {
$.selectSuggest = function(target, data, itemSelectFunction) {
var defaulOption = {
suggestMaxHeight: '200px',//弹出框最大高度
itemColor : '#000000',//默认字体颜色
itemBackgroundColor:'RGB(199,237,204)',//默认背景颜色
itemOverColor : '#ffffff',//选中字体颜色
itemOverBackgroundColor : '#C9302C',//选中背景颜色
itemPadding : 3 ,//item间距
fontSize : 12 ,//默认字体大小
alwaysShowALL : true //点击input是否展示所有可选项
};
var maxFontNumber = 0;//最大字数
var currentItem;
var suggestContainerId = target + "-suggest";
var suggestContainerWidth = $('#' + target).innerWidth();
var suggestContainerLeft = $('#' + target).offset().left;
var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();
var showClickTextFunction = function() {
$('#' + target).val(this.innerText);
currentItem = null;
$('#' + suggestContainerId).hide();
}
var suggestContainer;
if ($('#' + suggestContainerId)[0]) {
suggestContainer = $('#' + suggestContainerId);
suggestContainer.empty();
} else {
suggestContainer = $('<div></div>'); //创建一个子<div>
}
suggestContainer.attr('id', suggestContainerId);
suggestContainer.attr('tabindex', '0');
suggestContainer.hide();
var _initItems = function(items) {
suggestContainer.empty();
for (var i = 0; i < items.length; i++) {
if(items[i].text.length > maxFontNumber){
maxFontNumber = items[i].text.length;
}
var suggestItem = $('<div></div>'); //创建一个子<div>
suggestItem.attr('id', items[i].id);
suggestItem.append(items[i].text);
suggestItem.css({
'padding':defaulOption.itemPadding + 'px',
'white-space':'nowrap',
'cursor': 'pointer',
'background-color': defaulOption.itemBackgroundColor,
'color': defaulOption.itemColor
});
suggestItem.bind("mouseover",
function() {
$(this).css({
'background-color': defaulOption.itemOverBackgroundColor,
'color': defaulOption.itemOverColor
});
currentItem = $(this);
});
suggestItem.bind("mouseout",
function() {
$(this).css({
'background-color': defaulOption.itemBackgroundColor,
'color': defaulOption.itemColor
});
currentItem = null;
});
suggestItem.bind("click", showClickTextFunction);
suggestItem.bind("click", itemSelectFunction);
suggestItem.appendTo(suggestContainer);
suggestContainer.appendTo(document.body);
}
}
var inputChange = function() {
var inputValue = $('#' + target).val();
inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
var matcher = new RegExp(inputValue, "i");
return $.grep(data,
function(value) {
return matcher.test(value.text);
});
}
$('#' + target).bind("keyup",
function() {
_initItems(inputChange());
});
$('#' + target).bind("blur",
function() {
if(!$('#' + suggestContainerId).is(":focus")){
$('#' + suggestContainerId).hide();
if (currentItem) {
currentItem.trigger("click");
}
currentItem = null;
return;
}
});
$('#' + target).bind("click",
function() {
if (defaulOption.alwaysShowALL) {
_initItems(data);
} else {
_initItems(inputChange());
}
$('#' + suggestContainerId).removeAttr("style");
var tempWidth = defaulOption.fontSize*maxFontNumber + 2 * defaulOption.itemPadding + 30;
var containerWidth = Math.max(tempWidth, suggestContainerWidth);
$('#' + suggestContainerId).css({
'border': '1px solid #ccc',
'max-height': '200px',
'top': suggestContainerTop,
'left': suggestContainerLeft,
'width': containerWidth,
'position': 'absolute',
'font-size': defaulOption.fontSize+'px',
'font-family':'Arial',
'z-index': 99999,
'background-color': '#FFFFFF',
'overflow-y': 'auto',
'overflow-x': 'hidden',
'white-space':'nowrap'
});
$('#' + suggestContainerId).show();
});
_initItems(data);
$('#' + suggestContainerId).bind("blur",
function() {
$('#' + suggestContainerId).hide();
});
}
})(jQuery);
使用方式:
只需要定义一个input
标签,其标签的id为selectMessage
[可以更换id名],然后调用selectSuggest()
,该方法有三个参数,分别是input标签的id命,需要搜索的信息(Object),回调函数(function)
。
html代码
<input type="text"id="selectMessage" name="enterpriseName" />
js代码
// 注意:第一个参数是该标签的id值,并不需要加 ‘#’
$.selectSuggest('selectMessage',rows,(e) =>{});
可以封装成一个函数,当用户进行点击输入框的时候进行触发该事件;
<input type="text"id="selectMessage" oninput="selectData()" name="enterpriseName" />
// 用户点击时候触发的函数
function selectData() {
let val = $('#selectMessage').val();
let dataVal = {
enterpriseName: val
}
// getData是封装的一个ajax请求
this.getData('post','/url',dataVal, (res) => {
let rows = res.rows;
$.selectSuggest('selectMessage',rows, function (e) {
eName = e.target.innerText;
});
});
}
selectData();
// 获取需要渲染的数据
function getDataList() {
this.getData('post','/url',data11,function (res) {
var rows = res.rows;
$.selectSuggest('selectMessage',rows, function (e) {
eName = e.target.innerText;
});
});
}
getDataList();
Ajax请求封装(大佬可跳过)
不会封装ajax的可以参考我封装的ajax请求,大佬就请跳过或可留言更好的封装方法给我们大家参考学习
function getData(type,url,data,callback) {
$.ajax({
type: type,
url: prefix + url,
data: data,
//成功否, back, 服务器端响应度信息
success: function (res) {
callback(res);
},
//如果错误则错误信息。
error: function () {
// 这里使用的是ruoyi的提示框
$.modal.alertWarning("请求数据失败");
}
})
};