簡體   English   中英

使用HTML標簽和servlet自動完成

[英]Autocompletion using Html tags and servlets

我正在嘗試通過從文件中讀取文本來完成自動補全。 它的擺動很好。 我想在服務器上運行它。 使用過Html標簽和servlets可以正常工作,但是當我按Enter輸入查詢后顯示匹配列表時,如果我使用線程或任何Html標簽進行自動完成,如何使其自動完成。 我對編碼沒有太多了解。 請幫我這是我的servlet代碼

NewServlet.java

public class NewServlet extends HttpServlet {

 public NewServlet() {

    }
 String json;

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

   protected void doGet(HttpServletRequest request, HttpServletResponse  response)
        throws ServletException, IOException {
    response.setContentType("text/html");

    //  response.setContentType("application/json");
    AutoTest1 t = new AutoTest1();
    ArrayList<String> words = new ArrayList<>();
    Trie suggestions = new Trie();
    String fileName =  "C:/Users/USER/Documents/NetBeansProjects/HelloWorld/web/WEB-INF/aol.txt";
    words = t.readWordsFromFile(fileName);
    Trie trie = new Trie();

    for (String word : words) {
        trie.insert(word);
    }
    suggestions = trie;
    try (PrintWriter out = response.getWriter()) {

        Gson gson = new Gson();

        String prefix = request.getParameter("term");

        ArrayList<String> matchingSuggestions = suggestions.getAllPrefixMatches(prefix);

        //final List<AutoCompleteData> result = new ArrayList<AutoCompleteData>();
        for (String suggestion : matchingSuggestions) {
            json = gson.toJson(suggestion);
            // result.add(new AutoCompleteData(suggestion,suggestion));

        }
          response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        //  response.getWriter().write("<option>"+new Gson().toJson(result)+"<option>");      // Write response body.

        response.getWriter().write(json);
       }

    }

  }

autocomplete.jsp

<html>
<head>
<script      src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
        $("#search").autocomplete({     
        source : function(request, response) {
        $.ajax({
                url : "NewServlet",
                type : "GET",
                data : {
                        term : request.term
                },
                dataType : "json",
                success : function(data) {
                        response(data);
                }
             });
            }
          });
       });
    });
    </script>
  </head>
<body>
      <div class="search-container">
            <div class="ui-widget">
            <input type="text" id="search" name="search" class="search" />
            </div>
      </div>
 </body>
 </html>

您總是可以在web.xml中定義一個新的servlet,並在AJAX調用中對其進行調用以返回建議。

如果您使用的是jQuery,則可以執行以下操作

main.jsp中

<input type="text" list="suggestions" class="inputBox"/>

<datalist id="suggestions">
  <option value=" Loading...">
</datalist>

<script>
    $(document).ready(function(){
      $('.inputBox').on('keyup',function(){
         $.ajax({
            url : 'yourServletAction'
            data : {'query' : $(this).val()}
         }).done(function(data,jqXHR){
             $('#suggestions').html(data);
         });
      }); 
    )};
</script>

在服務器端的doGet() ,基於query參數,您將在ArrayList中填充建議,並將其保存為這樣的請求屬性

protected void doGet(HttpServletRequest request, HttpServletResponse   response) throws ServletException,IOException{
        String prefix =request.getParameter("query");
        ArrayList<String> matchingSuggestions =  suggestions.getAllPrefixMatches(prefix);

        request.setAttribute("suggestions",matchingSuggestions);
        RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/suggest.jsp");
        rd.forward(request,response);

    }

現在控件轉到了suggest.jsp ,我們可以使用JSTL(從此處下載)遍歷列表並發送選項。 實際上,您可以通過使用Jackson庫將JSON發送回去,但是我感覺到目前無法消化

suggest.jsp

<c:forEach items="${suggestions}" var="suggestion">
   <option value="${suggestion}" />
</c:forEach>

這應該給您一些開始:)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM