Блог

Главная - Вопросы по программированию - пытаюсь создать автоматически заполняемое текстовое поле в jsp, используя ajax из базы данных

пытаюсь создать автоматически заполняемое текстовое поле в jsp, используя ajax из базы данных

#jquery #ajax #jsp

#jquery #ajax #jsp

Вопрос:

файл index.jsp

// Вопрос в том, как скрыть автоматически заполняемое текстовое поле после выбора поля имени, но опция остается, так как вы можете видеть прикрепленный вывод ниже всего, что я правильно связал, например, jQuery, bootstrap. Пожалуйста, помогите мне с этим

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery Autocomplete from Database in JSP</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
        type="text/css">
    </head>
    <body>
    
        <div class="container">
            <h3 style="text-align: center; color: red;">Enter your name here</h3>
            <hr>
            <label>Enter Your Name</label> 
            <input type="text" name="name" id="txtCountry" class="form-control" placeholder="enter your name" aria-haspopup="true" role="textbox" autocomplete="off">
    
            <div id="showList">
                <ul class="list-group">
                </ul>
            </div>
        </div>


    <script src="js/jquery-1.12.4-jquery.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#txtCountry').keyup(function() {
                var search = $('#txtCountry').val();
                if (search !== '' amp;amp; search !== null) {
                    $.ajax({
                        type : 'POST',
                        url : 'displayAllRecord.jsp',
                        data : 'name='   search,
                        success : function(data) {
                            $('#showList').html(data);
                        }
                    });
                } else {
                    $('#showList').html('');
                }
            });
            $(document).on('click', 'li', function() {
                $('#txtCountry').val($(this).text());
            });
        });
    </script>

    
    </body>
    </html>

Файл displayAllRecord.jsp

этот файл помогает нам извлекать данные из базы данных и отображает имя в поле текстового поля

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>display record</title>
</head>
<body>
    <%
        if (request.getParameter("name") != null) //get "key" variable from jquery amp; ajax  part this line "data:'key=' search" and check not null 
    {
        String key = request.getParameter("name"); //get "key" variable store in created new "key" variable
        String wild = "%"   key   "%"; //remove "%" for use preparedstatement in query name like, and "key" variable store in "wild" variable for further use

        String url = "jdbc:mysql://localhost/projectdb"; //database url string
        String username = "root"; //datanase username
        String password = "murad123"; //database password

        try {
            Class.forName("com.mysql.jdbc.Driver"); //load driver
            Connection con = DriverManager.getConnection(url, username, password); //create connection

            PreparedStatement pstmt = null; //create statement

            pstmt = con.prepareStatement("SELECT * FROM student1 WHERE name LIKE ? "); //sql select query
            pstmt.setString(1, wild); //above created "wild" variable set in this
            ResultSet rs = pstmt.executeQuery(); //execute query and set in ResultSet object "rs".

            while (rs.next()) {
    %>
    <li class="list-group-item"><%=rs.getString("name")%></li>
    <%
        }
    con.close(); //close connection
    } catch (Exception e) {
        e.printStackTrace();
    }
    }
    %>
</body>
</html>

вывод

введите описание изображения здесь

Комментарии:

1. Привет, вам нужно скрыть весь этот список, то есть: добавьте этот lne $('#showList').hide() в свой $(document).on('click', 'li', function() { , посмотрите, работает ли это.

2. при добавлении этого $(‘#showList’).hide() он работает один раз, но если я снова обновлю страницу jsp, она вообще не заполняется, что делать??

3. да, вам нужно добавить $('#showList').show() внутри вашей функции успеха ajax, прежде чем добавлять данные внутри этого div.