Wednesday, 7 August 2013

Facebook like Autosuggestion with jQuery, Ajax and JAVA

// siddhu vydyabhushana // 12 comments
Facebook like auto suggestion with jquey, ajax with jsp also developed by 9lessons in php i never found this tutorial in java o jasp anywhere and i got many requests from users who are reading frequently.I lhope you like it.Automatically  based on the query you search the values will be listed.

  
                           Download Script:   Download File



  
Database: Actually i used ms access to connect with jsp,if you use mysql or oracle below code useful
CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
index.html
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".search").keyup(function() 
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;

if(searchbox=='')
{
}
else
{

$.ajax({
type: "POST",
url: "search.jsp",
data: dataString,
cache: false,
success: function(html)
{

$("#display").html(html).show();
	
	
	}
});
}return false;    


});
});

jQuery(function($){
   $("#searchbox").Watermark("Search");
   });
</script>
Search.jsp: it displays results
<%@page import ="java.sql.*"%>
<%
if(request.getParameter("searchword")!=null)
{
String q=request.getParameter("searchword");
try
{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection con=DriverManager.getConnection("jdbc:odbc:auto");
Statement stmt=con.createStatement();
ResultSet rs=stmt.executeQuery("select * from test_user_data where fname like '%"+q+"%' or lname like '%"+q+"%'  ");
while(rs.next())
{
String fname=rs.getString(2);
String lname=rs.getString(3);
String img=rs.getString(5);
String country=rs.getString(4);
%>
<div class="display_box" align="left">
<img src="user_img/<%=img%>" style="width:25px; float:left; margin-right:6px" /><%=fname%> <%=lname%><br/>
<span style="font-size:9px; color:#999999"><%=country%></span></div>
<%
}
con.close();
}
catch(Exception e)
{
out.println(e);
}
}
else
{
out.println("wrong");
}
%>
Css code: for simple and nice user interface
body
{
font-family:"Lucida Sans";
}
*
{
margin:0px
}
#searchbox
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
#shade
{
background-color:#00CCFF;
}

12 comments:

  1. not able to download the attachment

    ReplyDelete
    Replies
    1. I have read your blog its very attractive and impressive. I like it your blog.

      Java Training in Chennai Core Java Training in Chennai Core Java Training in Chennai

      Java Online Training Java Online Training Core Java 8 Training in Chennai Core java 8 online training JavaEE Training in Chennai Java EE Training in Chennai

      Delete
    2. Hibernate Online Training Hibernate Online Training Hibernate Training in Chennai Hibernate Training in Chennai Java Online Training Java Online Training

      Hibernate Training Institutes in ChennaiHibernate Training Institutes in Chennai Java Online Training Java Online Training Java Online Training Java Online Training

      Delete
    3. Java Training Institutes Java Training Institutes Java EE Training in Chennai Java EE Training in Chennai Java Spring Hibernate Training Institutes in Chennai J2EE Training Institutes in Chennai J2EE Training Institutes in Chennai Core Java Training Institutes in Chennai Core Java Training Institutes in Chennai

      Delete
  2. need query.js jquery.watermarkinput.js files content...

    ReplyDelete
  3. This is a nice tip, and however I like your articles, thanks for give sharing this to all together.
    Regards - Blot Tutorial Supporter

    ReplyDelete
  4. Very nice blog thanks for useful info with amazing content pay per click campaign

    ReplyDelete