基于JQ封装的输入远程搜索下拉

需求：实现输入框输入，然后搜索出数据用于下拉

效果图

js代码

;(function ($) {
    //这里放入插件代码
    "use strict";
    
    var RemoteSearch = function (element, options) {
        this.$element = $(element);
        this.options = $.extend(true, {}, $.fn.remoteSearch.defaults, options);
        this.id = $(element).attr('id');
        this.ulID = '#' + this.id + '_ul';
        this.ulFoucus = false;

        // Method overrides
        this.render = this.options.render || this.render;
        this.select = this.options.select || this.select;

        this.ajax = $.extend({}, $.fn.remoteSearch.defaults.ajax, this.options.ajax);

        this.listen();
    }
    
    RemoteSearch.prototype = {
    	listen: function () {
            this.$element.on('blur', $.proxy(this.blur, this))
                .on('keyup', $.proxy(this.keyup, this));
			
			this.$element.parent('div.remote_wrapper').on('click',this.ulID, $.proxy(this.click, this));
        },
        blur: function (e) {
            var that = this;
            e.stopPropagation();
            e.preventDefault();
            setTimeout(function () {
                if (!that.ulFoucus) {
                    that.$element.val(that.$element.attr('data-name'));
                    that.hide();
                }
            }, 150)
        },
        keyup: function (e) {
            e.stopPropagation();
            e.preventDefault();
            switch (e.keyCode) {
                case 40:
                	// down arrow
                case 38:
                    // up arrow
                    break;
                case 9:
                	// tab
                case 13:
                    // enter
                    break;
                case 27:
                    // escape
                    break;
                default:
                    this.ajaxer();
            }
        },
        hide: function () {
            $(this.ulID).remove();
            return this;
        },
        ajaxer: function () {
            var that = this,
                query = that.$element.val();
                
            // Query changed
            that.query = query;
            // Cancel last timer if set
            if (that.ajax.timerId) {
                clearTimeout(that.ajax.timerId);
                that.ajax.timerId = null;
            }

            // Query is good to send, set a timer
            that.ajax.timerId = setTimeout(function() {
                var params = { query : query };
                var jAjax = (that.ajax.method === "post") ? $.post : $.get;
                jAjax(that.ajax.url, params, function(data){
                	return that.render(data.data);
                });
                that.ajax.timerId = null;
            }, that.ajax.timeout);

            return that;
        },
        render: function (data) {
        	this.ulFoucus = false;
            var liList = data || [];
			var num = this._getNum();
			//添加 ul
			if($(this.ulID).length == 0) {
				this.$element.after("<ul id='" + this.id + "_ul' class='remote_search remote_search_top'></ul>");
			};
			//添加li
			var str = "";
			if(num) {
				if(liList.length) {
					for(var i = 0; i < liList.length; i++) {
						str += "<li data-id='"+liList[i].id+"' data-name='"+liList[i].name+"' title='"+liList[i].name+"'>" + liList[i].name + "</li>";
					}
				} else {
					str = "<li data-id='' data-name=''>搜索无数据</li>"
				}
			} else {
				this.$element.attr('data-name',"");
				this.$element.attr('data-id',"");
			}
			$(this.ulID).html(str);
			var bodyHeight = $(document.body).height();
			var offsetTop = this.$element.offset().top;
			var height = $(this.ulID).outerHeight(true);
			if(offsetTop + height > bodyHeight){
				$(this.ulID).addClass('remote_search_bottom').removeClass('remote_search_top');
			}else{
				$(this.ulID).addClass('remote_search_top').removeClass('remote_search_bottom');
			}
            return this;
       },
       	click: function (e) {
            e.stopPropagation();
            e.preventDefault();
            var dataName = $(e.target).attr('data-name');
			var dataID = $(e.target).attr('data-id');
			this.$element.val(dataName);
			this.$element.attr('data-name',dataName);
			this.$element.attr('data-id',dataID);
            this.options.chose(dataName,dataID);
            this.ulFoucus = true;
            return this.hide();
       	},
       	_getNum: function(){
       		return this.$element.val().length;
       }
    }
    
    
    $.fn.remoteSearch = function (option) {
        return this.each(function () {
            var $this = $(this),
                data = $this.data('remoteSearch'),
                options = typeof option === 'object' && option;

            if (!data) {
                $this.data('remoteSearch', (data = new RemoteSearch(this, options)));
            }

            if (typeof option === 'string') {
                data[option]();
            }
        });
    }
    
    $.fn.remoteSearch.defaults = {
        hiddenVal: '',
        chose: function () { },
        ajax: {
            url: null,
            timeout: 300,
            method: 'get',
            timerId: null
        },
        success: function(){}
    }
    
    $.fn.remoteSearch.Constructor = RemoteSearch;
    
})(jQuery);

css样式

.remote_search {
	/*display: none;*/
	position: absolute;
	left: 0;
	/*top: 35px;*/
	width: 100%;
	z-index: 999;
	background: #fff;
	max-height: 200px;
	overflow: auto;
	box-shadow: 0px 0px 8px #b3c5ff !important;
	border-radius: 4px !important;
}
.remote_search_top{
	top: 35px;
}
.remote_search_bottom{
	bottom: 35px;
}

.remote_search li {
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.remote_search li:hover {
	background-color: #E6F7FF;
	cursor: pointer;
}

调用

<!-- 外层的class： remote_wrapper需要加上去，在js中使用了这个class-->
<div class="remote_wrapper" style="position: relative;">
	<input type="text" id="remoteSearch11">
</div>

$('#remoteSearch11').remoteSearch({
	ajax:{
		url:"https://www.fastmock.site/mock/29487363107ab7d242c46305cadf4c52/formSelects/layui/data"
	},
	chose: function(text,val){
		console.log(text)
		console.log(val)
	}
})