Building a searchbox in jquery and asp.net MVC
Introduction
Hello folks, i was trying to implement a search functionality in one of my projects, and i came across different implementations but finally i came up with something useful.
In this tutorial, i use a jquery pulgin with an Asp.net MVC controller method that returns a JSON object.
This is the result you would get after completion:
The CSS, JavaScript and HTML Code
<html>
<head>
<link href="http://easyautocomplete.com/dist/easy-autocomplete.min.css" rel="stylesheet">
<link href="http://easyautocomplete.com/dist/easy-autocomplete.themes.min.css" rel="stylesheet">
<script src="http://easyautocomplete.com/javascripts/jquery-1.11.2.min.js"></script>
<script src="http://easyautocomplete.com/dist/jquery.easy-autocomplete.min.js"></script>
</head>
<body>
<div class="tbnav">
<table class="search">
<tr>
<td class="searchcat">
<select name="c" id="sd_sel">
<option id="ser_game">Games</option>
</select>
</td>
<td class="searchtxt">
<input type="text" id="search-box" placeholder="Search..." />
</td>
</tr>
</table>
</div>
<style>
.flag {
width: 32px;
height: 32px;
display: inline-block;
margin-right: 5px;
}
.eac-square input {
background-image: url("../../images/icon_search.png");
background-repeat: no-repeat;
background-position: right 10px center;
}
.tbnav {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
.tbnav .search {
border: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
margin-left: 3.16456%;
width: 62.02532%;
float: left;
margin-right: 1.26582%;
}
.tbnav .search .searchcat {
height: 35px;
padding: 0px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.tbnav .search .searchcat select {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
height: 38px;
/* width: 150px; */
color: #fff;
background-color: #000;
border-color: #357ebd;
border: 0;
outline: none;
box-shadow: none;
}
.tbnav .search .searchtxt {
width: 100%;
padding: 0;
}
.tbnav .search .searchtxt .searchbox {
border: 1px solid #FFF;
border-left: 0;
width: 100%;
min-width: 200px;
margin-right: 0;
margin-left: 0;
height: 35px;
padding: 1px;
padding-left: 4px;
outline: none;
box-shadow: none;
}
.tbnav .search .searchbtn {
width: 100px;
height: 35px;
padding-left: 5px;
}
.tbnav .search .searchbtn input {
height: 39px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<script>
var options = {
data: [{"name": "Soccer", "logo": "soccer.png"},
{"name": "Basketball", "logo": "backetball.png"},
{"name": "Tennis", "logo": "tennis.png"}
],
getValue: "name",
template: {
type: "custom",
method: function(value, item) {
return item.logo != undefined ? "<img class='flag img-circle' src='" + item.logo + "' />" + value : value;
}
},
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#search-box").easyAutocomplete(options);
</script>
</body>
<html>
In the code above, i used a custom JavaScript object notation to load the custom data. You would notice the highlighted code in yellow. I would show you another way to load data from a resource(URL) that returns a JSON data.
The MVC Controller Method
Create your own method that return a JSON object, it should look like this:
var games = gameRepo.GetGames();
var listgames = from g in games
select new
{
name = g.Name,
desc = g.Description,
rank = g.Rank,
Id = g.ID,
g.Logo
};
return Json(listgames.ToList(), JsonRequestBehavior.AllowGet);
var listgames = from g in games
select new
{
name = g.Name,
desc = g.Description,
rank = g.Rank,
Id = g.ID,
g.Logo
};
return Json(listgames.ToList(), JsonRequestBehavior.AllowGet);
The code should return a list of JSON objects when you run it in your browser.
Forgive the sketchy look on the returned object, your's should look much better than mine.
Update the JavaScript Code
Old code:
data: [
{"name": "Soccer", "logo": "soccer.png"},
{"name": "Basketball", "logo": "backetball.png"},
{"name": "Tennis", "logo": "tennis.png"}
],
New code:
options = {
url: http://localhost:8080/home/search,
getValue: "name",
template: {
type: "custom",
method: function(value, item) {
return item.logo != undefined ? "<img class='flag img-circle' src='" + item.logo + "' />" + value : value;
}
},
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#search-box").easyAutocomplete(options);
Nice post!
ReplyDelete.Net Online Course Bangalore