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);


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


Once you have your controller method and your JSON object working properly, you can now replace the previously highlighted JavaScript code in yellow with this:


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);


Enjoy!!!


Comments

Post a Comment

Popular posts from this blog

Solved: Jwt Authentication in Asp.Net Web Api And Mvc

Sending Notification Message with Firebase with JavaScript and .Net client

Using SignalR with Unity