首页 > 代码库 > JQuery UI之Autocomplete(2)
JQuery UI之Autocomplete(2)
1、Autocomplete获取后台数据
首先引入css和js文件,以及对应的HTML代码如下:
<link href="../css/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script> <script type="text/javascript" src="../js/jquery-ui.js" ></script> <label for="language">搜索:</lable> <input id="language" name="language" type="text">
对应的js代码如下:
//直接请求后端返回json数据,然后显示出来 $("#language").autocomplete({ source: "/Autocomplete.html" });
对应的后台java代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //前端发送的参数 String param= request.getParameter("term"); response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type"); response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); List<String > namelist=new ArrayList<>(); namelist.add("a"); namelist.add("b"); namelist.add("c"); namelist.add("d"); String[] arr={"Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German"}; //将数组或者集合对象转换成json返回到前端 PrintWriter printWriter=response.getWriter(); printWriter.print(JSONArray.toJSON(arr)); printWriter.flush(); }
当你在输入框中输入字符时,会默认发生get请求并把字符当做参数传到后端。此时我们可以根据传来的参数过滤所需的数据返回到前端显示,如:当输入c时会发生如下请求到服务器
返回的数据如下:
然后在输入框中显示,因为这里没有进行过滤,所以会把全部数据返回到前端
2、Autocomplete通过方法来获取数据
HTML和后台代码不变,对应的js代码如下:
$("#language").autocomplete({ // 通过函数来获取并处理数据源 source: function(request, response){ // request对象只有一个term属性,对应用户输入的文本 // response是一个函数,在你自行处理并获取数据后,将JSON数据交给该函数处理,以便于autocomplete根据数据显示列表 $.ajax({ type: "POST", url: "/Autocomplete.html", data : { "term" : request.term }, success: function(result){ //将json转为字符串 //response(JSON.stringify(result)); //将字符串转为json response(JSON.parse(result)); }, error: function(HttpRequest){ } }) } });
此时通过ajax发送请求到后端,然后将返回的结果转换成json通过response(JSON.parse(result));将数据显示出来。通过 request.term获取输入框的参数传递到后端。对应的效果与第一种相同。
JQuery UI之Autocomplete(2)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。