不使用Element UI库借助jQuery的库也可以实现‘搜索下拉框’的功能噢

搜索下拉框介绍

以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("请求数据失败");
           }
       })
  };