超级简单的实现搜索框智能提示 JQuery+Servlet

最新推荐文章于 2023-04-25 07:00:00 发布

安静de橘子

最新推荐文章于 2023-04-25 07:00:00 发布

阅读量5.7k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/freepart/article/details/71056924

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前台jsp

<%--
  Created by IntelliJ IDEA.
  User: Free
  Date: 2017/5/1
  Time: 13:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown" style="margin-left: 45%;margin-top: 10%">
    <input type="text" class="form-control" id="ajaxtest" data-toggle="dropdown" style="width:200px;">
    <ul id="search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></ul>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //隐藏 ul 元素，只是为了美观
        $("ul").hide();
        //当文本框有键盘输入的时候执行的函数
        $("#ajaxtest").keyup(function () {
            if($("#ajaxtest").val() == ""){
                //如果文本框没有值
                //先清空所有的 li ，即候选框
                $("li").remove();
                //隐藏 ul ，只是为了美观
                $("ul").hide();
                return;
            }
            //定义一个url 也就是请求
            var url = "search";
            $.get(url,
                {keyword:$("#ajaxtest").val()},
                function(data){
                    //先清空所有的 li ，即候选框
                    $("li").remove();
                    //遍历从后台取到的JSON数据
                    for(var i=0;i<data.length;i++){
                        //循环添加li节点
                    $("#search").append("<li role='presentation'><a role='menuitem' tabindex='-1' href='javascript:void(0)'>"+data[i]+"</a></li>");
                    //显示 ul 节点
                    $("ul").show();
                    //实现点击候选框的值，文本框的值被关联的效果
                        $("ul li a").mousedown(function () {
                            $("#ajaxtest").val($(this).text());
                        });
                }
            },
                "json");
        })

    });
</script>
</body>
</html>

后台 Servlet

package com.free.ajax;

import net.sf.json.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

/**
 * Created by Free on 2017/4/30.
 */
@WebServlet(name = "SearchServlet", urlPatterns = "/search")
public class SearchServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String message = request.getParameter("keyword");
        List<String> strings = new ArrayList<>();
        String temp = null;
        strings.add("ajax");
        strings.add("abcd");
        strings.add("anno");
        strings.add("anna");
        strings.add("auth");
        strings.add("av");
        strings.add("ar");
        List<String> list = new ArrayList<>();
        Iterator<String> iterator = strings.iterator();
        while (iterator.hasNext()) {
            temp = iterator.next();
            if (temp.contains(message)) {
                list.add(temp);
            }
        }
        response.getWriter().write(JSONArray.fromObject(list).toString());
    }
}

安静de橘子

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
6
评论
超级简单的实现搜索框智能提示 JQuery+Servlet

前台jsp<%-- Created by IntelliJ IDEA. User: Free Date: 2017/5/1 Time: 13:07 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" lan
复制链接

扫一扫