如何在使用 Jquery Autocomplete 和 JSP 时设置自动完成输入框的值

Posted 2023-02-24

【中文标题】如何在使用 Jquery Autocomplete 和 JSP 时设置自动完成输入框的值

【英文标题】：How to set the value of Autocomplete Input Box while using Jquery Autocomplete with JSP

【发布时间】：2015-11-20 16:57:22

【问题描述】：

提前致谢。 我有一个自动完成输入字段，我们可以在其中键入字符串并使用 jquery Autocomplete 我从 JSP 页面获取下拉列表，并且该 JSP 页面调用 Java 函数从 mysql 检索数据。

html代码如下。

<form>
        <input type="hidden" id="autosuggest" name="autosuggest" value="Y"/>
        <input type="text" name="Category" id="searchp" value="">
        <script>
            $("#searchp").autocomplete(
                delay: 100,
                autoFocus: true,
                selectFirst: true,
                source: 'ProviderSuggest.jsp',
                select: function (event, ui) 
                    $('#autosuggest').val('Y');
                
            );
        </script>
        <input type="submit" value="Submit"/>
    </form>

下面是 ProviderSuggest.jsp 的代码

    <%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Iterator"%>
<%@page import="Functions.DBConnections"%>
<%@page import="java.util.List"%>
<%
    String query = request.getParameter("term");
    List<String> CategoryList = new DBConnections().GetCategoryList(query);
    Iterator CatIterator = CategoryList.iterator();
    String JCategory = "";
    Map CategoryMap = new HashMap();
    while (CatIterator.hasNext()) 
        String Category = (String) CatIterator.next();
        String CategoryID = (String) CatIterator.next();
        CategoryMap.put(CategoryID, Category);
    
    Gson gson = new Gson();
    JCategory = gson.toJson(CategoryMap);
    System.out.println(JCategory);
    //out.print(JCountry);
    out.print(JCategory);
%>

下面是Java函数从MySql中获取数据的代码

public static List GetCategoryList(String Keyword) 
    List<String> CategoryList = new ArrayList<String>();
    try 
        Class.forName(driverName).newInstance();
        Connection connection = DriverManager.getConnection(connectionURL + dbName, dbuserID, dbpwd);
        PreparedStatement preStatement;
        ResultSet resultSet;
        String query = "SELECT Category, CategoryID FROM category WHERE Keywords LIKE '%" + Keyword + "%' AND ParentCatID != 0 Limit 10";
        preStatement = connection.prepareStatement(query);
        resultSet = preStatement.executeQuery(query);
        while (resultSet.next()) 
            CategoryList.add(resultSet.getString(1));
            CategoryList.add(resultSet.getString(2));
        
        resultSet.close();
        preStatement.close();
        connection.close();
     catch (ClassNotFoundException | InstantiationException | IllegalAccessException | SQLException ex) 
        Logger.getLogger(DBConnections.class.getName()).log(Level.SEVERE, null, ex);
    
    return CategoryList;

如果您看到 ProviderSuggest.jsp 返回一个带有 CategoryID 和 Category 的数组。 当我在前端显示它们时，我能够显示类别并且我试图将该自动完成输入字段的值设置为 CategoryID，以便在我提交表单时我只发送类别 ID 以进行进一步处理。 我可以知道我做错了什么，因为我无法将输入字段的值设置为 CategoryID。

谢谢。

【参考方案1】：

我不是 JQuery 粉丝/专家，但 $('#autosuggest').val('Y'); 行说将值设置为 const value Y，这不是您从服务器获得的值？！

另外在jsp中使用content-type设置响应

<%@page language="java" contentType="application/json;charset=UTF-8"
    pageEncoding="UTF-8"%>

如果有一个用于调用函数（运行查询）的sql端函数，java代码会更好，并通过PreparedStatement将值传递（转义）给函数

【参考方案2】：

如果你能做出这样的响应字符串，你可以将键值对设置为文本字段。

检查以下代码：

var availableTags2 = [ 
            label : "Category id1"
            value : "Category val1",
        , 
             label : "Category id2"
            value : "Category val2",

         ];

【讨论】：

感谢您的回复。如何像您提到的那样创建一个 json 数组以及如何在 jquery 中设置标签和值

label 和 value 是硬编码值，您可以附加 id 和 value，我的意思是您可以在 jsp 中形成响应，您将源作为 jsp 提供，所以请按照我的意思形成字符串跨度>

您能帮我看看如何使用 java 创建这种 json 数组，以及如何在 jquery 自动完成功能下访问它。我发现很难做到这一点。我的数据来自mysql。