js实现自动补全、上下键切换高亮、搜索等功能

搜索框展示：

一：准备页面容器

<div>
	<!-- 搜索输入框 -->
	<input type="text" id="search" class="form-control">

	<!-- 搜索图标 -->
	<img src="./search.png" class="right" id="seapng">
</div>
<!-- 搜索结果显示容器 -->
<div id="search_result" class=" "></div>

 二：定义CSS

<style>
#search_result {
	display: none;
	width: 300px;
	position: absolute;
	left: 8px;
	top: 46px;
	z-index: 1;
	overflow: hidden;
	background: #dcf6f8;
	border: #c5dadb 1px solid;
	border-top: none;
	position: absolute;
}

#search {
	width: 300px;
	height: 30px;
	float: left;
	height: 30px;
}

.right {
	float: left;
	border: 1px solid #000000;
	padding: 7px 20px;
	width: 20px;
	height: 20px;
	border-left: none;
}

.line {
	font-size: 12px;
	color: #000;
	background: #ffffff;
	width: 302px;
	padding: 2px;
}

.hover {
	background: #007ab8;
	color: #fff;
}
</style>

三：js逻辑

var currentLine = 0; // 定义上下键移动需要的参数

$("#search").keyup(function(event) {
	if (event.keyCode == 13) {//enter键盘事件
		enterFunc();
		return;
	}

	if (event.keyCode == 38) {//方向（上）键
		currentLine--;
		changeItem();
		return;
	}

	if (event.keyCode == 40) {//方向（下）键
		currentLine++;
		changeItem();
		return;
	}

	var key = $("#search").val();//获取输入框的内容
	if (key.replace(/\s+/g, "") == '') { //非空验证
		cleanHtml();
		return;
	}

	$.ajax({ //ajax查询
		url : "/intmoteServer/search.do",
		data : "key=" + key,
		type : "get",
		success : function(data) {

			if (data.length <= 0) //若没有结果，隐藏
				return;

			var htm; //遍历结果，拼接html
			htm = "<table id='ret'>";
			for (var i = 0; i < data.length; i++) {
				htm += "<tr id='sel'><td class='line'>" + data[i]
						+ "</td></tr>";
			}
			htm += "</table>";

			$('#search_result').show(); //显示并赋值
			$('#search_result').html(htm);

			$('.line:first').addClass('hover');// 表格第一行默认高亮

			$('.line').hover(function() { // 鼠标匹配到的元素高亮
				$('.line').removeClass('hover');
				$(this).addClass('hover');
			}, function() {
				$(this).removeClass('hover');
			});

			$('.line').click(function() { //选中行点击事件
				$('#search').val($(this).text());
				cleanHtml(); //清空操作
				search(); //执行查询
			})

		}
	});
});

//enter键盘事件
function enterFunc() {
	if ($(".hover").html() == null) //判断高亮显示的name是否为空
		return;
	$("#search").val($(".hover").html()); //赋值给输入框
	cleanHtml(); //清空操作
	search(); //执行查询
}

// 方向盘调用的事件
function changeItem() {
	if (currentLine < 0) { // 此时，第一行高亮，按下了方向（上）键
		currentLine = $("#ret .line").length - 1;
	} else if (currentLine == $("#ret .line").length) { //此时，最后一行高亮，按下了方向（下）键
		currentLine = 0;
	}
	$('.line').removeClass('hover'); // 清除高亮
	$(".line:eq(" + currentLine + ")").addClass('hover'); //添加高亮
}

function cleanHtml() {
	currentLine = 0; //重新赋值
	$('#search_result').html(""); //清空内容
	$('#search_result').hide();//隐藏div
}

$("#seapng").click(function() { //查询按钮点击事件
	search();
})

function search() { // 查询具体结果
	var name = $("#search").val();
	$.ajax({
		url : "/intmoteServer/searchOne.do",
		data : "name=" + name,
		type : "get",
		success : function(data) {
			// 相应处理
		}
	});
}

四：/intmoteServer/search 的Controller、Mapper

@Controller
@RequestMapping("/search")
public class SearchController {

	@Autowired
	private SearchService searchService;

	@GetMapping
	@ResponseBody
	public List<String> search(@RequestParam("key")String key) {
		
		List<String> names = searchService.search(key);

		return names;
	}
}

 

<select id="search" resultType="String">
    SELECT staff_name FROM gps_binding WHERE staff_name LIKE CONCAT(#{key},'%')
</select>