电子产品在哪些网站做调研,为什么要做手机网站开发,中国建材采购网官网,铜陵做网站1、效果
如下图所示#xff0c;我们在输入大学时#xff0c;程序会到后端查询名字中包含大学的数据#xff0c;并展示到前端页面。 用户选择一个大学#xff0c;该大学值会被赋值到input表单#xff0c;同时关闭下拉表单#xff1b; 当页面展示的数据都不符合条件时我们在输入大学时程序会到后端查询名字中包含大学的数据并展示到前端页面。 用户选择一个大学该大学值会被赋值到input表单同时关闭下拉表单 当页面展示的数据都不符合条件时用户点击空白处可关闭表单。
2、前端
2.1、页面html代码 label classlayui-form-label required th:text#{register.unit}单位名称:/label
div classlayui-input-blockinput typetext idUNIT name th:placeholder#{register.enterUnit} autocompleteoff classlayui-input
/div
div idshow classlayui-form-item styledisplay: none/div2.2、页面js代码
script$(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 li stylelist-style: none onclickdemo(this) obj[i] /li;}$(#show).html(htmlStr).show();}})} else {$(#show).hide();}})})//监听用户点击li的事件用户选择一个小li小li的值被赋值给input同时关闭小lifunction demo(dom) {$(#UNIT).val(dom.innerText);$(#show).hide();}//监听鼠标点击事件当后端返回没有符合条件的数据时用户点击空白页面时关闭show$(document).click(function(){$(#show).hide();});
/script2.3、页面css样式代码
style typetext/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);}/style3、后端
RequestMapping(/keyword)
ResponseBody
protected List unitData(HttpServletRequest req, HttpServletResponse resp) throws IOException {ListString listnew ArrayList();ListString universities Arrays.asList(公安局,教育局,北京大学,清华大学,上海交通大学,浙江大学,厦门大学,河南大学,河北大学, 浙江大学,福建大学,广东大学,广西大学,四川大学,山东大学,陕西大学,山西大学,a1,a2,a3,aa,.split(,));for (String s : universities) {if(s.contains(req.getParameter(name))){list.add(s);}}return list;
}
