jQuery 自動補全教程 · ZetCode 中文系列教程

# jQuery 自動補全教程 > 原文： [http://zetcode.com/articles/jqueryautocomplete/](http://zetcode.com/articles/jqueryautocomplete/) 在 jQuery 自動補全教程中，我們展示了如何使用 jQuery 自動補全組件。自動補全組件顯示來自 Java servlet 的過濾數據。作者的 Github [信息庫](https://github.com/janbodnar/jQuery-Autocomple)中提供了本教程的源代碼。 jQuery 是一個快速，小型且功能豐富的 JavaScript 庫。通過易于使用的 API（可在多種瀏覽器中使用），它使 HTML 文檔的遍歷和操作，事件處理，動畫和 Ajax 變得更加簡單。 jQuery UI 是在 jQuery 庫頂部構建的一組用戶界面小部件，效果，交互作用和主題。 `Autocomplete`是`jQuery UI`庫的 UI 小部件之一。當我們鍵入該字段時，它會提供建議。 JSON（JavaScript 對象表示法）是一種輕量級的數據交換格式。人類很容易讀寫，機器也很容易解析和生成。 JSON 的官方互聯網媒體類型為`application/json`。 JSON 文件擴展名是`.json`。 Java 中有許多庫可以處理 JSON 數據格式；其中一位是 Jackson。 ## jQuery 自動補全示例在下面的示例中，我們使用`Autocomplete`組件選擇一個錯誤名稱。錯誤名稱存儲在服務器上的 CSV 文件中。選定的錯誤名稱將發送并顯示在 JSP 頁面中。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>AutocompleteEx</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>AutocompleteEx</name> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>com.opencsv</groupId> <artifactId>opencsv</artifactId> <version>4.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> </plugins> </build> </project> ``` 我們在項目中使用這些依賴項。 `javax.servlet-api`依賴項提供對 Java Servlet 的支持。 `com.fasterxml.jackson.core`和`jackson-databind`是用于處理 JSON 文件的 Jackson JAR。 `opencsv`用于處理 CSV 文件。 `index.html` ```java <!DOCTYPE html> <html> <head> <title>jQuery UI Autocomplete</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .ui-autocomplete-loading { background: white url("img/anim_16x16.gif") right center no-repeat; } </style> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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 () { $("#bugs").autocomplete({ source: "Bugs", minLength: 1, }); }); </script> </head> <body> <form action="showBug.jsp"> <div class="ui-widget"> <label for="bugs">Bugs:</label> <input id="bugs" name="bug"> </div> <br> <div> <input class="ui-widget" type="submit" value="Submit"> </div> </form> </body> </html> ``` 在`index.html`文件中，我們在表單標簽中使用`Autocomplete`組件。 `action`屬性指向`showBug.jsp`頁面，該頁面顯示所選的錯誤名稱。 ```java <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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> ``` 我們包括`Autocomplete`組件的 JavaScript 庫和 CSS 樣式。 ```java <script> $(function () { $("#bugs").autocomplete({ source: "Bugs", minLength: 1, }); }); </script> ``` `Autocomplete`組件已創建。 `source`選項指向`Bugs` Servlet，該 Servlet 以 JSON 格式返回數據。 `minLength`選項指定用戶在執行搜索之前必須鍵入的最少字符數。 ```java <input id="bugs" name="bug"> ``` `Autocomplete`綁定到該輸入標簽。 `showBug.jsp` ```java <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bug</title> </head> <body> <p> Chosen bug: <%= request.getParameter("bug")%> </p> </body> </html> ``` 在`showBug.jsp` JSP 文件中，打印選定的錯誤。 `bugs.csv` ```java Assasin bug, Avondale spider, Backswimmer, Bamboo moth, Banana moth, Bed bug, Black cocroach, Blue moon, Bumble Bee, Carpenter Bee, Cattle tick, Cave Weta, Cicada, Cinnibar, Click beetle, Clothes moth, Codling moth, Centipede, Earwig, Eucalypt longhorn beetle, Field Grasshopper, Garden slug, Garden soldier, German cockroach, German wasp, Giant dragonfly, Giraffe weevil, Grass grub, Grass looper, Green planthopper, Green house spider, Gum emperor, Gum leaf skeletoniser, Hornet, Mealybug, Mites, Mole Cricket, Monarch butterfly, Mosquito, Silverfish, Wasp, Water boatman, Winged weta, Wolf spider, Yellow Jacket, Yellow Admiral ``` 在`WEB-INF/bug.csv`文件中，我們列出了一個錯誤名稱。當 Web 應用從客戶端收到 GET 請求時，將加載這些名稱。 `Bugs.java` ```java package com.zetcode.web; import com.zetcode.service.ReadBugs; import com.zetcode.util.Utils; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet(name = "Bugs", urlPatterns = {"/Bugs"}) public class Bugs extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); String term = request.getParameter("term"); String q = term.toLowerCase(); List<String> bugsList = ReadBugs.readAll(getServletContext()); List<String> filteredBugsList = Utils.filterListByTerm(bugsList, q); String json = Utils.list2Json(filteredBugsList); response.getWriter().write(json); } } ``` 這是 Java Servlet，它接收帶有名為`term`的參數的 GET 請求。 Servlet 讀取錯誤名稱列表，按檢索到的術語對其進行過濾，然后將其轉換為 JSON 字符串。 ```java response.setContentType("application/json"); ``` 我們將響應類型設置為`application/json`。 ```java String term = request.getParameter("term"); String q = term.toLowerCase(); ``` 我們得到搜索詞并將其更改為小寫。 ```java List<String> bugsList = ReadBugs.readAll(getServletContext()); List<String> filteredBugsList = Utils.filterListByTerm(bugsList, q); String json = Utils.list2Json(filteredBugsList); ``` 這三種方法讀取數據，過濾數據并將其轉換為 JSON。 ```java response.getWriter().write(json); ``` 最終的 JSON 字符串將發送到客戶端。 `ReadBugs.java` ```java package com.zetcode.service; import com.opencsv.CSVReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletContext; public class ReadBugs { public static List<String> readAll(ServletContext context) throws IOException { InputStream is = context.getResourceAsStream("/WEB-INF/bugs.csv"); List<String> bugsList = new ArrayList<>(); try (CSVReader reader = new CSVReader(new InputStreamReader(is))) { String[] nextLine; while ((nextLine = reader.readNext()) != null) { for (String e : nextLine) { bugsList.add(e.trim()); } } } return bugsList; } } ``` `readAll()`方法從 CSV 文件讀取所有錯誤。它使用 OpenCSV 庫來完成這項工作。它將列表錯誤名稱返回給調用者。 ```java InputStream is = context.getResourceAsStream("/WEB-INF/bugs.csv"); ``` Servlet 上下文用于確定 CSV 文件的路徑。 `Utils.java` ```java package com.zetcode.util; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import java.util.List; import java.util.logging.Level; import java.util.logging.Logger; import java.util.stream.Collectors; public class Utils { public static List<String> filterListByTerm(List<String> list, String term) { List<String> matching = list.stream() .filter(e -> e.toLowerCase().startsWith(term)) .collect(Collectors.toList()); return matching; } public static String list2Json(List<String> list) { String json = null; try { json = new ObjectMapper().writeValueAsString(list); } catch (JsonProcessingException ex) { Logger.getLogger(Utils.class.getName()).log(Level.SEVERE, null, ex); } return json; } } ``` 我們有一個`Utils`類，其中包含兩個方法。一個過濾數據，另一個將列表轉換為 JSON。 ```java List<String> matching = list.stream() .filter(e -> e.toLowerCase().startsWith(term)) .collect(Collectors.toList()); ``` 使用 Java 8 流 API，我們按搜索詞過濾數據。 ```java try { json = new ObjectMapper().writeValueAsString(list); } catch (JsonProcessingException ex) { Logger.getLogger(Utils.class.getName()).log(Level.SEVERE, null, ex); } ``` 使用 Jackson，我們將 Java 列表轉換為 JSON 字符串。 ![jQuery Autocomplete](https://img.kancloud.cn/33/fa/33fa3b3c9747dba7b99a654e8900e955_538x336.jpg) 圖：jQuery 自動完成在本教程中，我們在 Java Web 應用中使用了 jQuery 自動補全。自動補全組件正在顯示有關可用錯誤名稱的建議。在我們的項目中，我們利用了 Jackson 和 Opencsv 庫。您可能也對以下相關教程感興趣： [Java 教程](/lang/java/)，[使用 jsGrid 教程](/articles/jsgridservlet/)， [OpenCSV 教程](/articles/opencsv/)，[在 JSP 和 PHP 中使用 jQuery DatePicker](/articles/jquerydatepicker/)。