
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
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.