java实现弹出搜索提示框，点击提示自动填充到搜索框

朴灿烈づ我的快乐病毒、 2023-02-11 04:47 16阅读 0赞

## 一。实现效果图如下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]

## 二。实现原理 ##

**该功能主要实现了根据用户在搜索框输入的设备名称来进行一个动态的提示，点击下面的提示会自动填充到搜索框中。实现原理是给搜索框input绑定一个onkeyup事件，在该事件中用Ajax调用后台接口来返回模糊查询的数据。**

## 三。前台代码 ##

**1.前台搜索框以及搜索提示框代码：**

<div class="searchBox">
    					<input type="text"  id="cameName" value="" class="fl searchPuts" placeholder="请输入设备名称" onkeyup="getCameraNames()"/>
    					<a id="search" onclick="Index.ztreeList()" class="btnSearch">
    						<i></i><span style="cursor: pointer">搜索</span>
    					</a>
    				</div>
    				
    				<div class="searchDiv">
    
    				</div>

**2.搜索提示框样式：**

/*搜索提示框*/
    		.searchDiv{ 
    			display: none;
    			position: absolute;
    			/*div覆盖*/
    			z-index: 60;
    			padding-left: 10px;
    			padding-top: 5px;
    			color:#cdcdcd;
    			background: #093B67;
    			width: 245px;
    			height: 100px;
    			line-height: 1.5;
    
    			/*加滚动条*/
    			overflow:auto;
    
    		}
    		.searchDiv li:hover{ 
    			cursor: pointer;
    			background-color: #0b5d7f;
    		}

**3.主要js代码：**

//隐藏提示框
    	function searchDivOff() { 
    		$('.searchDiv').css('display', 'none');
    	}
    
    	//调用ajax返回名字模糊查询集合
    	function getCameraNames(){ 
    		//替换输入内容中所有的空字符
    		var keyVal = $("#cameName").val().replace(/(^\s*)|(\s*$)/g, "");
    		//如果搜索框输入为空
    		if(keyVal == null || keyVal == ""){ 
    			console.log("111");
    			searchDivOff();
    		}else{ 
    			//显示搜索提示框
    			$('.searchDiv').css('display','block');
    			//清空搜索提示框中的内容
    			$('.searchDiv').html("");
    			$.ajax({ 
    				type : "post",
    				async : false, //同步执行
    				url : "/camera/getCameraNames",
    				data :{ cameraName:$('#cameName').val()},
    				dataType : "json", //返回数据形式为json
    				success : function(result) { 
    					//判断返回的list是否为空，若不为空
    					if (result.cameraNameList!=null) { 
    						for(var i=0;i<result.cameraNameList.length;i++){ 
    							//把返回值添加到提示框中
    							$('.searchDiv').append('<li>'+result.cameraNameList[i]+'</li>');
    						}
    					}
    				},
    				error : function(errorMsg) { 
    					alert("不好意思,设备搜索提示请求失败啦!");
    				}
    			})
    		}
    	}
    
        //点击提示框自动填充到搜索框
    	$(document).on("click", ".searchDiv>li", function () { 
    		$('#cameName').val($(this).text());
    		searchDivOff();
    	})

## **四。后台代码：** ##

**1.dao层：**

/** * 根据设备名称模糊查询所有符合条件的设备名称 */
        List<String> getCameraNames(@Param("cameraName") String cameraName);

**2.dao的实现：**

<select id="getCameraNames" resultType="java.lang.String">
           SELECT CAMERA_NAME FROM tb_camera_info WHERE CAMERA_NAME like CONCAT('%', #{cameraName}, '%')
        </select>

**3.service层：**

/** * 根据设备名称模糊查询所有符合条件的设备名称 */
        List<String> getCameraNames(String cameraName);

**4.service的实现：**

@Override
        public List<String> getCameraNames(String cameraName) { 
            return this.baseMapper.getCameraNames(cameraName);
        }

**5.控制器层：**

@RequestMapping(value = "/getCameraNames")
        @ResponseBody
        public Object getCameraNames(@RequestParam String cameraName){ 
    
            //初始化json对象
            JSONObject jsonData=new JSONObject();
            if(cameraName!=null&&!"".equals(cameraName)){ 
                //根据名称得到数据库所有名称
                List<String> cameraNameList=cameraService.getCameraNames(cameraName);
                //把需要的数据放入json对象中
                jsonData.put("cameraNameList",cameraNameList);
            }
            //返回json对象
            return jsonData;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200521212513158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200521213329814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw==,size_16,color_FFFFFF,t_70