AutoSuggest select not working

naveendk.55 · 08-11-2012, 10:17 PM

Hi,

I am trying to write google like search (instant/Auto search) that shows values from database depending on the characters typed in input field. The database results are displaying while typing the chars. However, if I select any option from list of available list options, then the selected value is not updating into textbox. Any help will be appreciated.

Code:

 <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>

AndrewGSW · 08-11-2012, 10:39 PM

There is nothing in this code that would cause the behaviour you mention. Added: Oops, missed your fill method! You need to add a, perhaps, click event to the listed suggestions that then grabs the text and sets this as the value of your input.

What are the suggestions - are they a ul/li list or select/options? In either case it is probably the click event that you could use.

Because your list of suggestions are dynamically added to the HTML you need to use the jQuery live() method (or for jQuery 1.7, on()). You can't just use click() directly, as these elements won't exist on page-load. Something like:

Code:

$('.suggestions').live('click', function () {
    $('#inputString').val($(this).val());    // or ($(this).text());
});

which assumes your (new) suggestions each have the class "suggestions".

naveendk.55 · 08-11-2012, 10:43 PM

hi,

I have the events in below code. This code retreves the database values.

Code:

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

AndrewGSW · 08-11-2012, 10:45 PM

Of course, you could always investigate the jQuery autocomplete plug-in. You just need to feed your post data as the plug-in's, autocomplete-object's source. But, as you're almost there, there is probably no initial benefit.

AndrewGSW · 08-11-2012, 10:51 PM

Have you got a link to the page?

Try removing onblur="fill();" from your input - the suggestion may be used, but this code may immediately remove the text.

naveendk.55 · 08-11-2012, 10:55 PM

Thanks for your speedy reply. Is there any code change that you recommend in above files instead of using the plug-in that you suggested. Also I am getting the Values from DB and not hardcoded as shown in example.

AndrewGSW · 08-11-2012, 10:59 PM

Try removing onblur="fill();" from your input - the suggestion may be used, but this code may immediately remove the text.

naveendk.55 · 08-11-2012, 11:08 PM

Nope, removing fill() didn't help.

Also Once I click on a value from drop down list, then I get an error as below.

"NASH is undefined".

In above line, NASH is a value that I clicked from the dropdown list.

naveendk.55 · 08-11-2012, 11:32 PM

I resolved it by changing the code in JSP file to:

Code:

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

thanks for trying to help you.

AndrewGSW · 08-11-2012, 11:34 PM

Code:

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

There are a couple of extra apostrophes in the above code example.

Code:

fill(NASH)      // will look for something called NASH, which doesn't exist
fill('NASH')    // passes the string 'NASH' to the function.

or you might need this version:

Code:

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

AndrewGSW · 08-11-2012, 11:39 PM

You got there just before (or just after..?) me