Автозаполнение с использованием jsp и скриптов (без использования классов Java) - PullRequest
Новая
       54

Автозаполнение с использованием jsp и скриптов (без использования классов Java)

1 голос
/ 31 мая 2019

Я хочу сделать автозаполнение, но не с помощью какого-либо метода Java. Просто используя jsp, jquery, ajax и scriplets. Является ли это возможным? Пожалуйста, предложите.

Я пытался использовать приведенный ниже код, но получаю ошибку

Uncaught Error: невозможно вызвать методы при автозаполнении до инициализации; попытался вызвать метод List.jsp

Код указан ниже:

// (index.jsp) 

<html>
<head>

<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();
    }
%>

Я хочу, чтобы текстовое поле автоматически заполняло значения из базы данных при нажатии клавиш. Я сделал это с помощью Spring MVC, но я не понимаю, как это сделать, не используя java-класс, а просто используя jsp, jquery, ajax и scriplets. Пожалуйста, помогите!

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Вы можете сделать это, используя событие jquery onkeyup, когда пользователь начнет вводить в поле ввода, введенное значение будет передано вашей функции jquery, а с помощью ajax вы можете вызвать страницу List.jsp и получить это значение, используяrequest.getParameter(""), наконец передал это значение в вашем запросе и вернул результат обратно, используя out.print, как показано ниже:

Ввод то есть: где будет введено значение: 

    Select Country   :  <input type="text" id="country" name="country"/>
  //here result will be display
    <div id="result"></div>

Jquery & Ajax : 

 <script>
     $('#country').keyup(function(){
       //getting typed value
            var searchid=$(this).val();
               if(searchid!='')
                     {
                        $.ajax({
                           type:"POST",
                            url:"List.jsp",
                            //passing value
                             data:{search:searchid},
                             success:function(html){
                            //response from List.jsp page will come here                                       
                                $('#result').html(html);
                            }
                         });
                         } 
                   });
        </script>

List.jsp page : 

//getting value passed from ajax
 String search = (String) request.getParameter("search");
//db setting
      try{
        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);
          //below columnanme is fieldname from where you need to compare your search value.
        PreparedStatement pstmt = con.prepareStatement(
         "select * from tbctry where columnname LIKE ?");
         pstmt.setString(1, search + "%");
         ResultSet rs=pstmt.executeQuery();  
         while(rs.next()){ 
        //here you need to print values which you need to show in div 
         out.print("something"); 
          }
        rs.close();
    pstmt.close();
    con.close();

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

Надеюсь, это поможет!

0 голосов
/ 05 июня 2019

Страница List.jsp 

<%@page import="java.util.*" %>
<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.parser.JSONParser"%>
<%@page import="org.json.simple.parser.ParseException"%>
<%@ include file = "connect.jsp"%>

<%

//getting value passed from ajax
 String search = (String) request.getParameter("search");
    try{
        JSONArray dataArray = new JSONArray();
        JSONObject item = null;
        PreparedStatement pstmt = con.prepareStatement("select * from LPRONE.POINFO where PONO LIKE ?");
         pstmt.setString(1, search + "%");
         ResultSet rs=pstmt.executeQuery();  
         while(rs.next()){ 
            item = new JSONObject();
            item.put("name", rs.getString(12));
            dataArray.add(item);
          }
        //here you need to print values which you need to show in div
        out.println(dataArray); 
    } catch (Exception e) {
        e.printStackTrace();
    }

%>

Я использовал JSONObject и JSONArray для получения набора результатов и передал его на вызывающую страницу jsp через out.ptintln ().

Страница Input.jsp 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="jquery/jquery-1.7.min.js"></script>
    <script src="jquery/jquery.autocomplete.min.js"></script>
        <script src="jquery/jquery-ui.js"></script>
        <title>JSP Page</title>
    </head>
    <body>
<div class="form-group">
  Select Country   :  <input list="newlist" type="text" id="PO" name="PO"/>
  //here result will be display
    <datalist id="newlist"></datalist>
</div>

  <script>
     $('#PO').keyup(function(){
       //getting typed value
            var searchid=$(this).val();
               if(searchid!='')
                     {
             $(function(){
             $("#PO").autocomplete({
             source:function(request, response){
                        $.ajax({
                           type:"get",
                            url:"List.jsp",
                            //passing value
                             data:{search:searchid},
                             success:function(response){
                            //response from List.jsp page will come here     
                var obj = JSON.parse(response);
                if(!obj){

                }
                else{
                var dl = document.getElementById("newlist");
                dl.innerHTML="";
                for(var i=0; i<obj.length; i++)
                {
                var opt=document.createElement('option');
                dl.appendChild(opt);
                opt.innerHTML = opt.innerHTML + obj[i].name;
                }

                }
                            }
                         });
             }
             });
             });
                         } 
                   });
        </script> 

    </body>
</html>

Здесь я связал значения при успешном вызове ajax. Это рабочий пример автозаполнения с использованием функций jsp, jquery, ajax, scriplets, JSON и autocomplete. Сервлеты не используются.

...