我想进行自动完成,但不使用任何java方法。只需使用jsp,jquery,ajax和scriplets。可能吗?请提出建议。
我尝试使用下面给出的代码,但出现错误
未捕获错误:无法在初始化之前以自动完成方式调用方法;尝试调用方法“ 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(); } %>
我希望文本框在keydown时自动填充数据库中的值。我已经使用Spring MVC做到了这一点,但是如果不使用任何Java类,而只是使用jsp,jquery,ajax和scriplets,就无法获得如何执行此操作的任何线索。请帮忙!
您可以通过使用jquery onkeyup事件来做到这一点,当用户开始在输入框中输入内容时,键入的值将传递给您的jquery函数,而通过使用ajax,您可以调用List.jsp页面并使用来获取该值request.getParameter(""),最后在查询中传递该值并返回结果使用out.print如下:
onkeyup
jquery
List.jsp
request.getParameter("")
out.print
输入 ie:将在其中键入值的位置:
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页面 :
//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(); }
希望这可以帮助 !