Home/ Questions/Q 8370007
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:48:16+00:00

Below code display the list populated from database(DB code is not included). If I

  • 0

Below code display the list populated from database(DB code is not included). If I click on the search results, then the selected option will not show in textbox. Help please.

Below code works fine to show list of options from Database while typing characters. The issue is it will not show the selected drop down option into textbox. 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Auto Complete</title>
<script src="jquery/jquery.js" type="text/javascript"></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>
<style type="text/css">
body {
font-family: Helvetica;
font-size: 13px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 260px;
margin: 0px 0px 0px 0px;
width: 200px;
background-color: #7845DD;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #DD45CD;
}
</style>
</head>
<body>
<div>
<form>
<div> <h3><font color="red">Indian States</states></font></h3>
<br /> Enter India State Name 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>
</html>



<%
String name=request.getParameter("queryString");
try {
    Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
    Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost", "user", "password");
    Statement st=con.createStatement();
//Add the data into the database
String sql = "SELECT EMP_EMPLOYEE_ID, EMP_FNAME, EMP_LNAME FROM UAP_EMPLOYEE where EMP_FNAME     LIKE '%"+name+"%' OR EMP_LNAME LIKE '%"+name+"%';"; 
Statement stm = con.createStatement();
stm.executeQuery(sql);
ResultSet rs= stm.getResultSet();
while (rs.next ()){
out.println("<li onclick='fill("+rs.getString("EMP_FNAME")+");>"+rs.getString("EMP_FNAME")+"    </i>");
}}catch(Exception e){
out.println("Exception is ;"+e);
}
%>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In this line

    $('#autoSuggestionsList').html(data);

    you are setting some html that I assume consists of a list of div tags with your auto-suggestions. If you want the user to be able to click on the list, you need to have a click handler attached to the suggestions that loads the value. Like

    $(document).ready(function() {
   $("#autoSuggestionsList div").on("click", function() {
      //put your click actions here.. load the textbox, hide the list
   });
}

    The on command is live, meaning it will automatically be bound to elements that are loaded dynamically.

    EDIT

    Since you’re using li instead of div, change the above to 

    $(document).ready(function() {
   $("#autoSuggestionsList li").on("click", function() {
      fill($(this).text());
   });
}

    EDIT 2

    In the new code you added, this line is incorrect

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

    It will produce incorrect HTML/Javascript that looks like this:

    <li onclick='fill(some text);>some text</i>

    Your code should look like this:

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

    It will produce the following correct HTML/JavascriptL

    <li onclick='fill("some text");'>some text</li>

    • 0