jQuery 自动完成

最新推荐文章于 2024-07-24 11:38:03 发布

allway2

最新推荐文章于 2024-07-24 11:38:03 发布

阅读量300

点赞数

文章标签： jquery json javascript

本文链接：https://blog.csdn.net/allway2/article/details/124665246

版权

在 jQuery Autocomplete 教程中，我们展示了如何使用 jQuery Autocomplete 组件。自动完成组件显示来自 Java servlet 的过滤数据。本教程的源代码可在作者 Github 存储库中找到。

jQuery是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档的遍历和操作、事件处理、动画和 Ajax 变得更加简单，其易于使用的 API 可以跨多种浏览器工作。 jQuery UI是一组建立在 jQuery 库之上的用户界面小部件、效果、交互和主题。

Autocomplete是jQuery UI库的 UI 小部件之一。它在我们输入字段时提供建议。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。人类很容易读写，机器也很容易解析和生成。JSON 的官方 Internet 媒体类型是application/json. JSON 文件扩展名为.json. Java中有很多库可以处理JSON数据格式；其中之一是杰克逊。

jQuery 自动完成示例

在下面的示例中，我们使用一个Autocomplete组件来选择一个错误名称。错误的名称存储在服务器上的 CSV 文件中。选定的错误名称被发送并显示在 JSP 页面中。

pom.xml

<?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</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.13.2</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.13.2.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

<!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 显示所选错误名称的页面。

<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 样式。

<script>
    $(function () {

        $("#bugs").autocomplete({
            source: "Bugs",
            minLength: 1,
        });
    });
</script>

Autocomplete组件已创建。该source选项指向BugsServlet，它以 JSON 格式返回数据。该minLength 选项指定执行搜索前用户必须输入的最少字符数。

<input id="bugs" name="bug">

与Autocomplete此输入标签相关联。

showBug.jsp

<%@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.jspJSP 文件中，将打印所选的错误。

bugs.csv

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 请求时，将加载这些名称。

com/zetcode/Bugs.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. servlet 读取错误名称列表，按检索到的术语对其进行过滤，并将其转换为 JSON 字符串。

response.setContentType("application/json");

我们将响应类型设置为application/json。

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);

这三个方法读取数据、过滤数据并将其转换为 JSON。

response.getWriter().write(json);

最终的 JSON 字符串被发送到客户端。

com/zetcode/ReadBugs.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 库来完成这项工作。它向调用者返回一个列表错误名称。

InputStream is = context.getResourceAsStream("/WEB-INF/bugs.csv");

servlet 上下文用于确定 CSV 文件的路径。

com/zetcode/Utils.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。

List<String> matching = list.stream()
        .filter(e -> e.toLowerCase().startsWith(term))
        .collect(Collectors.toList());

使用 Java 8 流 API，我们按搜索词过滤数据。

try {
    json = new ObjectMapper().writeValueAsString(list);
} catch (JsonProcessingException ex) {
    Logger.getLogger(Utils.class.getName()).log(Level.SEVERE, null, ex);
}

使用 Jackson，我们将 Java 列表转换为 JSON 字符串。

图：jQuery 自动完成

在本教程中，我们在 Java Web 应用程序中使用了 jQuery Autocomplete。自动完成组件显示了可用错误名称的建议。在我们的项目中，我们使用了 Jackson 和 Opencsv 库。

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 自动完成

在 jQuery Autocomplete 教程中，我们展示了如何使用 jQuery Autocomplete 组件。自动完成组件显示来自 Java servlet 的过滤数据。本教程的源代码可在作者 Github存储库中找到。jQuery是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档的遍历和操作、事件处理、动画和 Ajax 变得更加简单，其易于使用的 API 可以跨多种浏览器工作。jQuery UI是一组建立在 jQuery 库之上的用户界面小部件、效果、交互和主题。..
复制链接

扫一扫