java - 使用 jquery 在我的表 tbcntry 中自动完成 jsp 形式的国家文本框-6ren

java - 使用 jquery 在我的表 tbcntry 中自动完成 jsp 形式的国家文本框

转载作者：行者123 更新时间：2023-11-30 10:34:33

25

4

//下面是我的表单页面，其中包含国家/地区的文本框我想显示所有以字母开头的国家/地区并自动完成我数据库中的值以及使用 jsp、java、jquery 的国家/地区数据

<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/uilightness/jquery-    ui.css"rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#country').focusin(function() {
$("#country").autocomplete("List.jsp");
});
});
</script>
</head>
<body>
    <br><br><center>
        <font face="verdana" size="2">
        <font size="4">Java(jsp)/jQuery Autocompleter Example</font>
        <br><br><br><br>

        Select Country   :
        <input type="text" id="country" name="country"/>

        </font>
    </body>
</html>

//下面是连接数据库的List.jsp页面

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>

<%
    try {
        String s[] = null;

        Class.forName("com.mysql.jdbc.Driver");
        System.out.println("Driver found");
        String url = "jdbc:mysql://localhost:protNum/dbName";
        String user = "";
        String pass = "";
        System.out.println("Connected....");
        Connection con = (Connection) DriverManager.getConnection(url, user, pass);
        Statement st = con.createStatement();
        ResultSet rs = st.executeQuery("select * from tbctry");

        List li = new ArrayList();

        while (rs.next()) {
            li.add(rs.getString(1));
        }

        String[] str = new String[li.size()];
        Iterator it = li.iterator();

        int i = 0;
        while (it.hasNext()) {
            String p = (String) it.next();
            str[i] = p;
            i++;
        }

        //jQuery related start
        String query = (String) request.getParameter("q");

        int cnt = 1;
        for (int j = 0; j < str.length; j++) {
            if (str[j].toUpperCase().startsWith(query.toUpperCase())) {
                out.print(str[j] + "\n");
                if (cnt >= 5)// 5=How many results have to show while we are typing(auto suggestions)
                {
                    break;
                }
                cnt++;
            }
        }
 //jQuery related end

        rs.close();
        st.close();
        con.close();

    } catch (Exception e) {
        e.printStackTrace();
    }
%>

最佳答案

//下面是使用json和jquery实现autocomplete//Jsp 表单页面，用于在用户输入第一个字母时将国家名称作为文本框输入，自动完成功能开始运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>Autocomplete in java web application using Jquery and JSON</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#search").autocomplete({
                        source: function(request, response) {
                            $.ajax({
                                url: "CountryListCheck",
                                type: "GET",
                                data: {
                                    term: request.term
                                },
                                dataType: "json",
                                success: function(data) {
                                    response(data);
                                }
                            });
                        }
                    });
                });
            });
        </script>


    </head>
    <body>
        <div class="header">
            <h3>Autocomplete in java web application using Jquery and JSON</h3>
        </div>
        <br />
        <br />
        <div class="search-container">
            <div class="ui-widget">
                country:
                <input type="text" id="search" name="search" class="search" />
            </div>
        </div>
    </body>
</html>

//下面是url CountryListCheck对应controller的代码

 "/CountryListCheck":
    String term = request.getParameter("term");
    System.out.println("Data from ajax call " + term);
                    ArrayList<String> list = new Op_contact(dcon).getAllCountriesCheck(term);
                    System.out.println(list);
                     Json = new Gson().toJson(list);
                   response.getWriter().write(Json );

//下面是操作类代码或数据库查询部分

public ArrayList<String> getAllCountriesCheck(String l) {
        ArrayList<String> list = new ArrayList<String>();
        PreparedStatement ps = null;
        String data;
        try {
            String ch=l+"%";
            ps = (PreparedStatement) dcon.con.prepareStatement("SELECT nicename FROM tbctry  WHERE nicename  LIKE '"+ch+"'");
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                data = rs.getString("nicename");
                System.out.println(data);
                list.add(data);
            }
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        return list;
    }

关于java - 使用 jquery 在我的表 tbcntry 中自动完成 jsp 形式的国家文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41606227/

25

4

0

文章推荐： swift - 触摸手势识别器清除屏幕的随机功能

文章推荐： swift - Firebase swift 4 : iterate through observe results

python 形式
这是一个新手理论问题 - 我刚刚开始使用 Python 并研究 Django 和 orm。问题:如果我开发我的对象并通过额外的开发修改基础对象结构、继承等 - Django 的 ORM 解决方案会自动
Javascript 形式 - 根据选择不同的电子邮件
我正在使用带有服务器端处理器的 JavaScript 表单，并且我希望能够让表单根据下拉列表转到不同的电子邮件。我已经根据其他表格尽了最大努力，但似乎无法通过电子邮件。我已在电子邮件地址的选项标签下添
Haskell Monadic 形式
一个简单的问题:给定定义，(来自 Haskell SOE) do x — el; el\ ...; en => el »= \x — do e2\ ...; en 和: do let d
Angular react 形式
我是 Angular 5 的新手。我目前正在研究 Angular Reactive 表单。我有一个下面的 JSON 结构，我需要在从 FORM 获取值后发回 REST API。 JSON 结构: {
Angular react 形式
我是 Angular 5 的新手。我目前正在研究 Angular Reactive 表单。我有一个下面的 JSON 结构，我需要在从 FORM 获取值后发回 REST API。 JSON 结构: {
Haskell - 形式 A -> A -> ... -> A 的所有函数
我有一个类型(称之为 A)，我想创建一个 A -> A、A -> A -> A、A -> A -> A -> ... 等类型的函数的类型类.这不起作用: {-# LANGUAGE FlexibleIn
Java线程正在重复 Swing 形式
我正在使用 java 线程同时管理多个 (3) 程序。1 用于 Java swing 表单(绘制 UI 以进行输入)，1 用于在系统托盘上设置图标(从 UI 获取输入后立即启动)，1 用于处理输入并将
css - 形式:垂直居中
在当前的元素中，我在表单中遇到了一个问题。表单中标签的字体大小可能大于默认值。如果我把它举起来，那么右边的输入必须垂直居中。我查看了 Bootstrap 和 Foundation，但都没有解决这个问
html - 组元素？形式
为了好玩，我使用了一段从 friend 那里得到的代码，并尝试创建一个包含用户名和密码的登录字段，但我很难获得单词旁边的字段。 username 这个词和你输入的框之间有很大的差距。密码也是如此。这
Angular 形式 - 访问模板中的嵌套控件
我的表单中有一个嵌套的控制组，我想访问它们的表单状态值(如原始和有效)以动态显示验证错误。是这样动态构建的 controlMap['password'] = this.password; contr
Angular 重置 react 形式
发送后我试图重置我的表单，但只有值设置为空。 component.html {{note.value?.length || 0}}/10
php - 将输入添加到 Stripe 形式
我正在尝试自定义 Stripe 结帐表单，但我不知道如何添加输入。我想添加“电话号码”和“姓名”以创建费用和客户。你知道我该怎么做吗？这是我应该自定义的代码。最佳答案您将无法使用
html - 带表格的 Angular 形式
所以我有这个需求，我想以表格的形式提交一个由五个记录组成的表单。这就是它的样子表: 这是对应的代码: Section Q.No Question
Angular react 形式 - 在模糊时验证但在键入时更新模型
我有一个使用 react 形式和输入文本的情况。我需要: 当用户输入时，根据输入的内容建议一个列表(我使用的是 ngx bootstrap typeahead)；仅当用户失去输入焦点时才验证输入字
Angular 强类型 react 形式
我希望重构我的 Angular 项目中的大量组件，以具有强类型的 FormGroups、FormArrays 和 FormControls。我只是在寻找一种实现强类型 react 形式的好方法。任何
php - 如何更改错误类(yii2 形式)
我有事件表格: 'horizontal', 'fieldConfig' => [ 'template' => "{input}\n{hint}\n{error}",
angular - 在新选项选择错误时使用多项选择的 react 形式
是否有关于如何实现多选和响应式表单的示例？我正在尝试在 multiselect-dropdown 上设置所选项目(从数据库中检索)，它会更新显示的项目( View )，但会引发以下错误: core.
javascript - 按钮打破 react 形式
我想在表单中添加按钮以动态添加输入。但是我发现，如果我在表单中添加了一个仅记录到控制台的按钮(并且当我尝试添加输入时)，它将记录日志，然后表单中断。我的Electron应用程序的前端窗口崩溃(不退出但
javascript - 具有隔离范围的指令内的 Angular 形式
我有一个这样的表格此表单位于指令内: angular.module('crowdcoreApp').directive('investorForm',function(){
javascript - 对话框中的 Angular 形式
我在 angularjs Controller 中调用的 $mdDialog 中有一个表单，如下所示: actions-controller.js function callForm() {

首页

博学

6Ren·AI

商城

java - 使用 jquery 在我的表 tbcntry 中自动完成 jsp 形式的国家文本框