1、效果

如下图所示，我们在输入大学时，程序会到后端查询名字中包含大学的数据，并展示到前端页面。
用户选择一个大学，该大学值会被赋值到input表单，同时关闭下拉表单；
当页面展示的数据都不符合条件时，用户点击空白处，可关闭表单。

2、前端

2.1、页面html代码

单位名称:

    

2.2、页面js代码

    $(function () {
    	//用于监听键盘事件
        $("#UNIT").bind('input porpertychange', function () {
            var word = $(this).val();
            if (word != "") {
                $.ajax({
                    url: "./keyword",
                    data: {"name": word},
                    type: "post",
                    dataType: "json",
                    success: function (obj) {
                        console.log(obj);
                        var htmlStr = "";
                        for (var i = 0; i < obj.length; i++) {
                            htmlStr += "
" + obj[i] + "";
                        }
                        $("#show").html(htmlStr).show();
                    }
                })
            } else {
                $("#show").hide();
            }
        })
    })
  服务器托管网  //监听用户点击li的事件，用户选择一个小li，小li的值被赋值给input，同时关闭小li
    function demo(dom) {
        $("#UNIT").val(dom.innerText);
        $("#show").hide();
    }
    //监听鼠标点击事件，当后端返回没有符合条件的数据时，用户点击空白页面时，关闭show
    $(document).click(function(){
        $("#show").hide();
    });

2.3、页面css样式代码

        * {
            margin: 0px;
            padding: 0px;
        }
        #UNIT {
            width: 100%;
            height: 42px;
            border-color: #4E6EF2;
            float: left;
        }
        #show {
            border: 1px solid #4e6ef2;
            position: relative;
            left: 20%;
            margin-right: 45%;
            text-align: left;
        }
        li:hover{
            background-color: rgba(0,120,212, 0.1);
        }
    

3、后端

@RequestMapping("/keyword")
@ResponseBody
protected List unitData(HttpServletRequest req, HttpServletResponse resp) throws IOException {
    List list=new ArrayList();
    List universities = Arrays.asList("公安局,教育局,北京大学,清华大学,上海交通大学,浙江大学,厦门大学,河南大学,河北大学, 浙江大学,福建大学,广东大学,广西大学,四川大学,山东大学,陕西大学,山西大学,a1,a2,a3,aa,".split(","));
    for (String s : universities) {
        if(s.contains(req.getParameter("name"))){
    服务器托管网        list.add(s);
        }
    }
    return list;
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Vue3中的Ref与Reactive：深入理解响应式编程

前言 Vue 3是一个功能强大的前端框架，它引入了一些令人兴奋的新特性，其中最引人注目的是ref和reactive。这两个API是Vue 3中响应式编程的核心，本文将深入探讨它们的用法和差异。 什么是响应式编程？ 在Vue中，响应式编程是一种使数据与UI保持同…