文本框叠合下拉框，下拉框附带查询

最新推荐文章于 2022-06-17 10:44:50 发布

zh_o_O

最新推荐文章于 2022-06-17 10:44:50 发布

阅读量858

点赞数

文章标签： jsp 文本框叠合下拉框

本文链接：https://blog.csdn.net/zh_o_O/article/details/69389391

版权

<script type="text/javascript">

(function($) {
    $.selectSuggest = function(target, data, callbackFunction) {
    		var defaulOption = {
    			suggestMaxHeight: '200px',//弹出框最大高度
    			itemColor : '#000000',//默认字体颜色
    			itemBackgroundColor:'RGB(255,255,255)',//默认背景颜色
    			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;
        		}
        		//创建当前的标签，记录当前要显示的html值
        		 //创建一个子<div>
                var suggestItem = $('<div></div>');
                //为当前标签添加属性id——data数据中的指定id
                suggestItem.attr('id', items[i].id);
                //为当前标签添加显示内容——data数据中的指定text
                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", callbackFunction);
                //把当前标签追加在父类标签里边
                suggestItem.appendTo(suggestContainer);
            }
            //document.body指定文档主体的开始和结束等价于<body></body>
            //在这里表示把父类标签追加写入到<body></body>标签中
            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);

</script>

 <input class="s" type="text" name="keyWords" id="keyWords" value="请输入关键字" οnblur="updateValue(this.value);" οnclick="delValue(this.value);"></input>
               
               	<script type="text/javascript">
								$(function (){
									//获取下拉框的数据
									var datas=getselectData();
									$.selectSuggest('keyWords',datas);
								});
								//获取下拉框的数据
								function getselectData(){
									var datas=[];
									var url="<%=path %>/LCsearch2/getselectData_search.it";
									$.ajax({
										url:url,
										type:"post",
										async: false,
										success:function(jsonhtml){
											if(jsonhtml!=null&&jsonhtml!=''){
												var jsonArray=eval("("+jsonhtml+")");
												for(var i=0;i<jsonArray.length;i++){
													datas[i]={"id":i,"text":jsonArray[i]};
												}
											}
										}
									});
									return datas;
								}
				</script>