Autocompleteextender

Autocompleteextender

View Answers

August 28, 2008 at 7:33 PM

Hi friend,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AutoCompleter Search</title>
<style type="text/css">
.normal {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}
.over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
div#result {
display: none;

border:1px solid #000000;
}
</style>
<script language="javascript">
var xmlHttp;
function searchText() {
var search = document.getElementById("search").value;
var url = "/jsp/AutocompleterTest?search=" + search;

if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("Get",url,true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if( xmlHttp.readyState==4 ){
if( xmlHttp.status==200 ) {
var result = document.getElementById('result');
result.innerHTML = '';
var respText = xmlHttp.responseText;
if((respText.length)!=0){
show_div('result');
show_div('close');
var str = xmlHttp.responseText.split("\n");
var items;
for(i=0; i < str.length - 1; i++) {
items = '<div onmouseover="javascript:overText(this);" ';
items += 'onmouseout="javascript:outText(this);" ';
items += 'onclick="javascript:setText(this.innerHTML);" ';
items += "class="normal">' + str[i] + '</div>';
result.innerHTML += items;
}
}
else
{
hide_divs();
}
}
}
}
function focusIn(){
document.getElementById("search").focus();
}
function overText(div_value) {
div_value.className = 'over';
}
function outText(div_value) {
div_value.className = 'normal';
}
function setText(value) {
document.getElementById('search').value = value;
hide_divs();
document.getElementById('result').innerHTML = '';
}
function show_div(div_id) {
document.getElementById(div_id).style.display = 'block';
}
function hide_divs() {
document.getElementById('result').style.display = 'none';
document.getElementById('close').style.display = 'none';
}
</script>
</head>
<body onload="focusIn();">
<br>
<br/>
<center>
<table border="1">
<tr>
<td>
<h2>AutoCompleter Example</h2>
<form>
<b>Enter Search Keyword</b>
<table border = "0" width="400px">
<tr>
<td><input type="text" id="search" name="search" onkeyup="searchText()" autocomplete="off" /></td>
</tr>
<tr>
<td><div id="result"></div></td>
</tr>
<tr>
<td><div id="close" align="right" style="display: none;"><a href="" onclick="hide_divs(); return false">close</a></div></td>
</tr>
</table>
</form>
</center>
</body>
</td>
</tr>
</table>
</html>

August 28, 2008 at 7:34 PM

package javacode;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.*;

public class AutocompleterTest extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
String search = request.getParameter("search");
response.setContentType("text/html");
response.setHeader("Cache-Control", "no-cache");
if(!((search.trim()).equals(""))){
String searchString = getSearchResult(search);
System.out.println(searchString);
response.getWriter().write(searchString);
}
else{
System.out.println("Length of string"+("".length()));
response.getWriter().write("");
}
}
public String getSearchResult(String search) {
Connection con = null;
String driverName = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://192.168.10.211:3306/";;
String dbName = "amar";
String userName = "amar";
String password = "amar123";
String finalSearch="";
try{
Class.forName(driverName).newInstance();
con = DriverManager.getConnection(url+dbName, userName, password);

try{
Statement st = con.createStatement();
ResultSet res = st.executeQuery("SELECT distinct(citylist) FROM SearchDetail WHERE citylist like('"+search+"%') ORDER BY citylist");
System.out.println("res>>>" + res);
while (res.next()) {
String un = res.getString("citylist");
finalSearch+= un+"\n";

}
con.close();

}
catch (SQLException e){
System.out.println("SQL code does not execute." + e);
}
}
catch (Exception e){
e.printStackTrace();
}
return finalSearch;
}

}

August 28, 2008 at 7:35 PM

<?xml version="1.0" encoding="ISO-8859-1"?>



<web-app xmlns="http://java.sun.com/xml/ns/javaee";

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd";

version="2.5">


<servlet>
<servlet-name>autocompleterTest</servlet-name>
<servlet-class>javacode.AutocompleterTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>autocompleterTest</servlet-name>
<url-pattern>/jsp/AutocompleterTest</url-pattern>
</servlet-mapping>


</web-app>


---------------------------------

Thanks.









Related Tutorials/Questions & Answers:
Autocompleteextender - Ajax

Ads