ola amigos porfavor me encuentro en un problema lo que pasa es que tengo un autocomplete que consulta a la base de datos mysq lo que pasa qes que cuando trato de darle click a uno de los resultados que sale debajo del text..no se llena el text con la palabra que le doy click...es decir como lo hace google cuando le doy click en uno de los resultados que aparece debajo de la caja de texto se llena la caja de texto con la palabra a la cual le he dado click...
este es el codigo esta en aplicacion web..jsp:
--------------------------------------------------------------------------------------------------------
autoSuggesTextbox.html
<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="jqjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jqjs/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jqjs/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jqjs/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="jqjs/jquery.ui.autocomplete.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>
<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>
este es el jsp
-------------------------------------------------------------------------------------------------
states.jsp
<%@ page language="java" import="java.sql.*" %>
<% response.setContentType("text/html");%>
<%
String str=request.getParameter("queryString");
try {
String connectionURL = "jdbc:mysql://localhost/ankdb";
Connection con;
Class.forName("com.mysql.jdbc.Driver").newInstance ();
// Get a Connection to the database
con = DriverManager.getConnection(connectionURL, "root", "root");
//Add the data into the database
String sql = "SELECT state FROM states WHERE state LIKE '"+str+"%' LIMIT 10";
Statement stm = con.createStatement();
stm.executeQuery(sql);
ResultSet rs= stm.getResultSet();
while (rs.next ()){
out.println("<li onclick='fill("+rs.getString("state")+")'>"+rs.get String("state")+"</li>");
}}catch(Exception e){
out.println("Exception is ;"+e);
}
%>
por favor espero su ayuda..
