Autocomplete can't filling textbox

Question

I have autocomplete but not filling the textbox My Java code:

 String string=request.getParameter("queryString");
 try
 {
  String connectionURL = "jdbc:mysql://localhost:3306/path";
  Connection con;
  Class.forName("com.mysql.jdbc.Driver");
  con = DriverManager.getConnection(connectionURL, "root", ""); 
  String sql = "SELECT name FROM jsample WHERE name LIKE '%"+
                string+"%' LIMIT 10";
  Statement stm = con.createStatement();
  stm.executeQuery(sql);
  ResultSet rs= stm.getResultSet();
  while (rs.next ())
  {
   out.println(
     "<li onclick='fill("+rs.getString("name")+
     ");'>"+rs.getString("name")+"</li>"
   );
  }
 } catch(Exception e) {
   out.println("Exception is ;"+e);
 }

This is my script to get values:

 <head>
  <script type="text/javascript" src="js/jquery.min.js"></script> 
  <script type="text/javascript">
   function lookup(inputString)
   {
    if(inputString.length == 0)
    {
     $('#suggestions').hide();
    } else {
     $.post(
      "states.jsp", 
      {queryString: ""+inputString+""},
      function(data)
      {
       if(data.length >0)
       {
        $('#suggestions').show();
        $('#autoSuggestionsList').html(data);
       }
      });
    }
   }
   function fill(thisValue)
   {
    $('#inputString').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
   }
  </script>
  <link rel="stylesheet" href="css/style-au.css"/>
 </head>
 <body>
  <div>
   <form>
    <div>
     <h3><font color="red">Name Selected</states></font></h3><br />
     Enter Name from database to see autocomplete
     <input type="text" size="30" value="" id="inputString" 
      onkeyup="lookup(this.value);" onblur="fill();" />
    </div>
    <div class="suggestionsBox" id="suggestions" style="display: none;">
     <div class="suggestionList" id="autoSuggestionsList"></div>
    </div>
   </form>
  </div>
 </body>

This is my scripts for showing the autocomplete.

How to fill the values to textbox?

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Because the returned data is dynamic data so you can not capture such events. Please refer to the following link In jQuery, how to attach events to dynamic html elements?

edited May 23 '17 at 11:51

Community

1
1

answered Nov 18 '15 at 10:46

fongg

1
1

thanks for answer can you give me example the code please? – Programmer Staff 02 Nov 18 '15 at 11:34

score 0 · Accepted Answer · answered Nov 18 '15 at 13:43

3 things to change:

1.) Add id to your <li>

out.println("<li onclick='fill("+rs.getString("name")+");' id='"+rs.getString("name")+"' >" + rs.getString("name") + "</li>");

2.) Add $('#inputString').val(thisValue.innerHTML); in your function fill.

3.) Remove onblur="fill();" from input tag it's not required.

Autocomplete can't filling textbox

2 Answers2