Facebook autocomplete with JQuery and ASP.net
Being a dot net developer I always like to do something new and innovative however this time I would like to introduce to you how to create facebook style autocomplete plugins using JQuery and ASP.net. Nowadays everyone is familiar with facebook and it’s features, so one needs to be up to date and unique. These kinds of plugins are used to perform tasks quickly and it is also helpful in increasing user experience as this saves time during surfing application.
My facebook autocomplete looks like below.
First face:-
Second face:-
Here goes the explanation of the complete code:
To understand the complete code download the source file from here.
- First create an fb-autocomplete.aspx page.
Add following files on top of the page
<script src=”js/jquery.tools.min.js” type=”text/javascript”></script>
<script src=”js/jquery-ui.min.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”css/autocomplete.css” />
Also add this script on header section of page
<script type=”text/javascript”>
$(document).ready(function(){
$(‘html’).click(function(e){
e.stopPropagation();
$(“#BindListItem”).fadeOut();
});
$(“#sortable”).sortable(); // Make Movie list sortable
$(“#MovieName”).val(“”);
$(“#MovieName”).bind(‘keyup’, function(){
$(“#BindListItem”).fadeIn();
var argMovieName = “”;
argMovieName = $(“#MovieName”).val();
$.ajax({ type: “POST”,
url: “WebService.asmx/getMovieName”,
data: “{‘argName’:'”+argMovieName+”‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function(msg) {
var myArray = JSON.parse(msg);
$(“#BindListItem”).text(“”);
if(myArray.length==0){
$(“#BindListItem”).removeClass(‘setborder’);
}
for(var i = 0; i < myArray.length; i++)
{
if(myArray[i].length !=0)
{
$(“#BindListItem”).addClass(‘setborder’);
}
$(“#BindListItem”).append(“<div><img src=imgfiles/”+ myArray[i].MIconURL + ” width=’60’ height=’50’ />” + myArray[i].MName + “</div>”);
}
$(“#BindListItem div”).click(function(e){
var argURL
var argdate= new Date();
var argimgID = argdate.getTime();
if($(e.target).is(‘div’)){
argURL = $(e.target).children().attr(‘src’);
$(“#imgholder ul”).prepend(“<li><img src=”+argURL+” height=’80’ width=’80’ id=”+ argimgID +”></li>”);
$(“#imgholder ul li:last”).remove();
} else {
argURL = $(e.target).attr(‘src’);
$(“#imgholder ul”).prepend(“<li><img src=”+argURL+” height=’80’ width=’80’ id=”+ argimgID +”></li>”);
$(“#imgholder ul li:last”).remove();
}
}),
$(“#sortable li img”).click(function(e){
var imgID = $(e.target).attr(‘id’)
$(“#removeImg”).text(“”);
$(“#removeImg”).append(“<div id=”+ imgID +”>click here to remove selected photo</div>”);
}),
$(“#removeImg”).click(function(e){
var selectorID = $(e.target).attr(‘id’);
$(“#”+ selectorID).remove();
});
},
error: function(msg)
{
alert(msg.responseText);
}
});
});
$(“#imgholder ul”).click(function(e){
$(this).find(‘li’).removeClass(‘active’);
if($(e.target).is(‘li’)){
$(e.target).addClass(‘active’);
} else {
$(e.target).parents().addClass(‘active’);
}
});
$(“#MovieName”).bind(‘keydown’, function(){
$(“#BindListItem”).text(“”);
});
});
</script>
Add this to body section of page
<!–Start container–>
<div>
<div>
<input type=”text” id=”MovieName” class=”textbox” />
<div id=”imgholder”>
<ul id=”sortable”><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>
<div style=”margin:20px 20px;” id=”removeImg”></div>
<!–Start bind movies list–>
<div id=”BindListItem”>
</div>
<!–End bind movies list–>
</div>
<!–End container–>
- On second step create WebService.cs page
And add following Web Method on this page to get all the info from database on suggested keyword. Here you need to define your database info in MovieHandler class and then you can get all properties using MovieProperty Class.
public string getMovieName(string argName)
{
string jsonString = “”;
MovieHandler MHandler = new MovieHandler(GenericClasses.DataAccessLayer.DBManagerFactory.DatabaseProvider.SqlServer, “server=servername; DataBase=dbname; user=user; pwd=pwd; “);
if (argName.ToString().Trim() != “”)
{
MovieProperty[] MPropertycollection = MHandler.getMovieCollection(argName);
JavaScriptSerializer serializer = new JavaScriptSerializer();
jsonString = serializer.Serialize(MPropertycollection);
}
return jsonString;
}
Whenever you will make a request an event will be fire via Ajax and getMovieName method will provide you all the information related to request.
- And finally create your database to store information.
If you like this article please send us your comments. Meanwhile enjoy the article.
About Post Author
