I have a html file called autoSuggestTextbox.html which is shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Auto Complete</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').hide();
} else {
$.post("SearchIndex.jsp", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}
function fill(thisValue) {
//alert ($('#autoSuggestionsList').show());
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
$('#inputString').select(function() {
alert('Handler for .select() called.');
});
function selectText(suggestions)
{
if (document.selection)
{
var div = document.body.createTextRange();
div.moveToElementText(document.getElementById(suggestions));
div.select();
}
else
{
var div = document.createRange();
div.setStartBefore(document.getElementById(suggestions));
div.setEndAfter(document.getElementById(suggestions)) ;
window.getSelection().addRange(div);
}
}
</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"><a href="file:////home/SPLTeam7/GlassFish_Server/glassfish/domains/domain1/docroot/hms/autoSuggestTextbox.html">Indian States
</states>
</a></font></h3>
<br /> Enter India State Name to see autocomplete
<input type="text" size="30" name="inputString" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" onclick="selectext(autoSuggestionsList);"/>
<button onclick="selectText(suggestions)">Select Text</button>
</div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</form>
</div>
</body>
</html>
I also have a jsp file called SearchIndex.jsp which is shown below
<jsp:useBean id="sessionBean" scope="session" class="com.spl.hms.SessionBean"></jsp:useBean>
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.text.*"%>
<% response.setContentType("text/html");%>
<script langauage="Javascript">
var inputString;
function Go()
{
location.href = 'autoSuggestTextbox.html?inputString=' + document.getSelection("inputString").value;
}
</script>
<%
String stri=request.getParameter("queryString");
String SQLstr = "SELECT service_type FROM pb_operating_parameters WHERE service_type ILIKE '"+stri+"%' LIMIT 10";
ResultSet wardsRs = sessionBean.getDataResultSet(SQLstr);
Boolean colorRow = false;
try{
while(wardsRs.next()){
out.println("<li 'fill("+wardsRs.getString("service_type")+");'>"
+wardsRs.getString("service_type")+"</i>");
}
}catch(NullPointerException sqle){
out.print(sqle.getMessage());
}catch(Exception sqle){
out.print(sqle.getMessage());
}
%>
Please can someone help me on how to select a value from the drop down list created in a div and put it in the textbox
kim