Kumar
10632
112
8/29/2012 (IST)
0
Download Source Files:
Introduction
This autosuggest search engine is inspired from facebook. This is developed using ASp.Net MVC3 Razor. But this can be used in any application like asp.net, mvc or php.
This application is aimed to reduce the overload on server and to work in low bandwidth. The entire html for autosuggest box will be created at client side. So it reduces the load on server while fetching data from server to client.
In this example, model is used to return the details of countries instead of database. Code for this article is given below.
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
function lookup(inputString) {
$("#Website").blur(function () { setTimeout("clearResults()", 500) });
var searchstring = trim(inputString);
if (searchstring.length > 0) {
$.post("Home/GetMemberSearchData", { searchString: "" + inputString + "" },
function (data) {
if (data.length > 0) {
$("#suggestions").show();
$('#autoSuggestionsList').html('<div style=\"margin-left:45%;padding:5px;\"><img src="../../images/47.gif" /></div>');
var searchstr = '<ul>';
for (var i = 0; i < data.length; i++) {
searchstr += '<li>';
searchstr += '<a href="javascript:void()" class="gotopage" id=\'/Profile/Index?ProfileId=' + data[i].Id + '\'>';
searchstr += '<table border=\"0\" cellpadding=\"0\" cellspacing=\"3\"><tr><td>';
searchstr += '<img src=' + data[i].Flag + ' alt="No Img"/>';
searchstr += ' </td><td valign=\"top\">';
searchstr += '' + data[i].Name + ' <br>';
searchstr += 'custome text here';
searchstr += '</td></tr></table>';
searchstr += '</a>';
searchstr += '</li>';
}
searchstr += '<li><div style=\"padding:15px 5px;background-color: #d4d4d4;\">';
searchstr += '<a href="">More results</a>';
searchstr += '<div></li>';
searchstr += '</ul>';
$("#autoSuggestionsList").html(searchstr);
}
});
}
else {
$("#autoSuggestionsList").html('');
$("#suggestions").hide();
}
}
$('.gotopage').live('click', function () {
var hreflid = $(this).attr('id');
window.location = hreflid;
});
function hidelookup() {
$("#autoSuggestionsList").html('');
$("#suggestions").hide();
}
// clear auto complete box
function clearResults() {
$("#autoSuggestionsList").html('');
$("#suggestions").hide();
}
function trim(stringToTrim) {
return stringToTrim.replace(/^\s+|\s+$/g, "");
}
</script>
<div style="height: 40px; background-color: #3E688C;margin:0px auto">
<div style="padding:10px 0px;margin-left:35%">
<input type="text" placeholder="Search.." id="Website" name="Website" style="width: 300px"
maxlength="2048" onkeyup="lookup(this.value);" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</div>
</div>
namespace Facebook_like_Autosuggestion_search_box.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } [HttpPost] public JsonResult GetMemberSearchData(string searchString) { List<Codemyne.Models.Countries> objCnt = new List<Codemyne.Models.Countries>(Codemyne.Models.Countries.GetCountriesFlags(searchString)); return Json(objCnt); } } }
namespace Codemyne.Models { public class Countries { public Int64 Id { get; set; } public string Name { get; set; } public string Flag { get; set; } internal static List<Countries> GetCountriesFlags(string searchString) { List<Countries> obj = new List<Countries> { new Countries { Id = 1, Name = "India",Flag="/Flags/India.png" }, new Countries { Id = 2, Name = "Pakisthan",Flag="/Flags/Pakistan.png" }, new Countries { Id = 3, Name = "SriLanka",Flag="/Flags/SriLanka.png" }, new Countries { Id = 4, Name = "Bangladesh",Flag="/Flags/Bangladesh.png" }, new Countries { Id = 5, Name = "China",Flag="/Flags/China.png" }, new Countries { Id = 6, Name = "Russia",Flag="/Flags/RussianFederation.png" }, new Countries { Id = 7, Name = "USA" ,Flag="/Flags/USA.png"} }; return obj.FindAll(delegate(Countries objc) { return objc.Name.ToLower().Contains(searchString.ToLower()); }); } } }
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment