jQueryAutocomplete+struts2 实现文本框自动完成_struts2 jquery autocomplete-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37146977/article/details/73136884

本文介绍使用jQuery UI的Autocomplete插件实现文本框输入自动完成功能的方法，包括基本配置及如何从Struts2 Action获取数据。

最近做项目涉及文本框输入自动完成的功能，类似百度和淘宝的搜索框，查了许多资料，搞了许久，还是觉得jQuery的Autocomplete最快速、最易理解，在此记录一下。效果如下：

这里写图片描述

实现过程大致如下：
1、下载jquery-ui，网址：http://jqueryui.com/autocomplete/
2、上面的网站提供了一个最基本的实现方法，html代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

</body>
</html>

实现流程为：获取数组availableTags中的值，当在输入框tags中输入时，筛选数组，将匹配的条目显示在下拉框中，点击其中一个条目后，自动填入文本框中。
同时，可见代码中导入的css和js文件是在线的，只需用下载的jquery-ui中的文件代替就可转为离线的了，需替换的文件如下：
这里写图片描述
3、上例中自动联想的下拉框的数据是静态的，那么如何获取struts2 Action中的数据并实现自动完成呢？诀窍在于Autocomplete的source参数选项，将source的内容改为url，修改后的html如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tags" ).autocomplete({
      /*使用这种方法不会对action返回的数据进行筛选，而是显示所有数据，因为Autocomplete认为后台服务器已经对数据进行了筛选，
        故可以在action中对数据进行筛选，实际上当在文本框中输入内容"a"时，Autocomplete向action发送的请求为 
        /AutocompleteAction.action?term=a  文本框的内容作为参数term传给了action  */
      source: "AutocompleteAction.action" 
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

</body>
</html>

4、再来看action中的内容，action中返回的数据是JSON格式的。action如下：

public class AutocompleteAction extends ActionSupport{

    private String term;

    public String getTerm() {
        return term;
    }

    public void setTerm(String term) {
        this.term = term;
    }

    @Override
    public String execute() throws Exception {
        HttpServletRequest req = ServletActionContext.getRequest();
        HttpServletResponse resp = ServletActionContext.getResponse();
        resp.setContentType("text/html;charset=UTF-8");

        ArrayList<String> data = new ArrayList<String>();

        this.term = req.getParameter("term"); //获得文本框的内容

        /*...... 这里可以利用获取的term对数据库进行模糊查询，以实现数据筛选的目的，
        之后构造返回的data，本例未实现，只构造静态的数据用于演示*/

        data.add("Hello");
        data.add("action");
        data.add("123");
        data.add("15");
        data.add("艺术");
        data.add("文学");

        JSONArray json = JSONArray.fromObject(data); //返回的数据应为JSON格式的，可以利用方法构造，也可以自行构造
        PrintWriter out = resp.getWriter();
        out.print(json.toString());

        System.out.println("term:"+this.term);
        System.out.println(json.toString());
        return null;
    }
}