搜索框内容自动补全

方便操作给输入框设置一个id.

<input type="text" class="form-control" placeholder="Search" id="searchText">

<div id="completeShow" style="display: none;">
						<ul id='itemul' class='list-group'>		
						</ul>

<script>
			// 1.页面加载
			$(function () {
				// 2.为搜索框绑定一个键盘弹起事件
				$("#searchText").keyup(function () {
					//3.获得用户输入的数据
					var word = $(this).val();
					//4.非空判断
					if(word.trim()!=""){

					    // 12 每次发送请求之前，先清空ul里面的数据
						$("#itemul").empty();

						// 5.发送异步请求
						$.get("${pageContext.request.contextPath}/WordServlet",{word:word},function(data){
							// 6.非空判断
							if(data!=""){
							    // 10.有数据，li所在的div显示
								$("#completeShow").show();

								// 7.遍历
								$(data).each(function (i,m) {
									//alert(m.word);
									// 8.将数据显示在li标签中，并使用一个临时变量存储
									var temp = "<li class='list-group-item'><a href='#'>"+m.word+"</a></li>";
									// 9.将li显示在指定位置
									$("#itemul").append(temp);
                                });
							}
						},"json");
					}else{
					    // 10 没有数据，li所在的div隐藏
						$("#completeShow").hide();
                    }
                }).focus(function () {
					// 15.为搜索框绑定一个聚焦事件，判断li里面有没有数据
					if($("#itemul li").length>0){
					    // 16.有数据，显示li所在的div
                        $("#completeShow").show();
					}
                }).click(function () {
					// 17.禁用搜索框的鼠标单击事件
					return false;
                });

				// 13.为整个文档绑定一个鼠标单击事件
				$(document).click(function () {
					// 14.隐藏li所在的div
                    $("#completeShow").hide();
                });
            });
		</script>```
```java
@WebServlet(name = "WordServlet", urlPatterns = "/WordServlet")
public class WordServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
            IOException {
        response.setContentType("text/html;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        // 获得请求参数word
        String word = request.getParameter("word");
        // 调用service层根据关键word，模糊查询的方法
        WordService service = new WordService();
        List<Word> words = service.findResultByWord(word);
        // 将查询结果转成json格式的数据(常见的有四种：JSONLIB JackSon Gson fastjason)
        /**
         * PDF:jackson
         * word:jsonlib
         * 课上：gson
         */
        /*Gson gson = new Gson();
        String json = gson.toJson(words);*/

        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(words);

        System.out.println(json);
        // 响应
        response.getWriter().write(json)
    }

public class WordService {
    public List<Word> findResultByWord(String word) {
        WordDao dao = new WordDao();
        return dao.findResultByWord(word);
    }

public class WordDao {
    public List<Word> findResultByWord(String word) {
        //1.创建JdbcTemplate核心对象
        JdbcTemplate template = new JdbcTemplate(DRUIDUtils.getDataSource());
        //2.编写SQL语句
        String sql = "select * from word where word like ? or pinyin like ?";
        //3.设置实际参数
        Object[] params = {"%"+word+"%","%"+word+"%"};
        //4.执行查询操作
        List<Word> words = template.query(sql, new BeanPropertyRowMapper<>(Word.class), params);
        return words;
    }

当输入关键字，会在数据库中模糊查询，每次刷新清空列表，当鼠标点击其他位置不显示列表。