记录-前端带搜索功能的选择空间

小灰灰 2022-06-10 14:07 182阅读 0赞

(function($) {
    	
    	$.getSelectorValue = function(target){
    		return $('#xyt_selector_' + target).val();
    	}
    	
        $.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();
    
    		$(document.body).append("<input id='xyt_selector_"+target+"' type='hidden' values='-1'/>");
    		
            var showClickTextFunction = function() {
                $('#' + target).val(this.innerText);
    			$('#xyt_selector_' + target).val(this.id);
                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();
    			if(!items || items.length==0)
    				return;
                for (var i = 0; i < items.length; i++) {
                		if(items[i].text.length > maxFontNumber){
                			maxFontNumber = items[i].text.length;
                			}
    						
    				if(items[i].defaultValue==true){
    					$('#xyt_selector_' + target).val(items[i].id);
    					$('#'+target).val(items[i].text);
    					items[i].defaultValue=false;
    				}		
                    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,
    					'z-index':19891019
                    });
                    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();
    			if(!inputValue){
    				$('#xyt_selector_' + target).val("-1");
    				return;
    			}
                inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
                var matcher = new RegExp(inputValue, "i");
                return $.grep(data,
                function(value) {
                    return matcher.test(value.text);
                });
            }
    
    		if (!!window.ActiveXObject || "ActiveXObject" in window){
    			$('#' + target).bind("propertychange",
    			function() {
    				_initItems(inputChange());
    			});
    		}
    		else{
    			$('#' + target).bind("input",
    			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);

使用方式

初始化数据

$.selectSuggest('inputId',\[\{id:1,text:'test1',defaultValue:true\},\{id:2,text:'test2'\},\{id:3,text:'test3'\}\]);

获得选中数据

$.getSelectorValue("inputId");

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue前端：几种搜索框功能实现

Vue前端：几种搜索框功能实现前言一、搜索框输入内容自动检索（1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）

红太狼/ 2024年03月30日 14:12/ 0 赞/ 98 阅读

相关带搜索功能的下拉框select

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动

柔光的暖阳◎/ 2022年08月01日 13:46/ 0 赞/ 1391 阅读

相关使用intent调用手机自带搜索功能搜索内容

Intent intent = new Intent(Intent.ACTION_WEB_SEARCH); intent.put

雨点打透心脏的1/2处/ 2022年07月13日 00:47/ 0 赞/ 150 阅读

相关记录-前端带搜索功能的选择空间

(function($) { $.getSelectorValue = function(target){ return $('xyt

小灰灰/ 2022年06月10日 14:07/ 0 赞/ 183 阅读

相关带搜索功能的下拉选择框select2

api 地址：[ http://select2.github.io/select2/][http_select2.github.io_select2]

矫情吗；*/ 2022年06月04日 09:58/ 0 赞/ 672 阅读

相关 H5实现搜索记录功能

<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>搜索记录</titl

谁践踏了优雅/ 2022年04月22日 13:42/ 0 赞/ 305 阅读

相关 bootstrap-select前端bootstrap自带的模糊搜索功能

bootstrap-select前端bootstrap自带的模糊搜索功能引入的css和js <link href="/js/plugins/bootst

末蓝、/ 2022年03月14日 14:14/ 0 赞/ 712 阅读

相关前端实现选择列表功能的精美页面

先来一下最终效果吧 ![20190404092453899.gif][] -------------------- 亮点元素 1、jquery 2、bootstr

红太狼/ 2022年02月24日 12:42/ 0 赞/ 470 阅读

相关 android自带记录功能的输入框AutoCompleteTextView

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

柔情只为你懂/ 2021年09月17日 02:06/ 0 赞/ 315 阅读

相关 layui实现带搜索功能的select

页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta name="applica

骑猪看日落/ 2021年05月10日 11:33/ 0 赞/ 1165 阅读