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

Paystack In Asp.Net MVC

-
Introduction Happy new year folks. I hope you all enjoyed your holidays.  Let me enlighten you with some new year codes 😊. Remember my post on how to implement a payment gateway on Paystack with Node js ? today, you would see it in action in Asp.Net . I am not going to build a customer subscription app like I did in the previous one, rather I would provide explicit codes that can be used to implement payment on any mobile apps, web apps, and any platform indeed. It is a simple code and can be easily integrated into your projects. To know more about Paystack infrastructure, visit the developer's section on their website. They have already written some libraries on vast programming languages like Python , Java , Node js and so on... If you have problems working with the code or implementing it on your project, drop your comments and you might receive an email from me or if your company is looking forward to incorporating a payment solution, you can contact me. Diving t
Read more

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

-
Jwt in Asp.Net Web API And MVC Introduction Token based security is trending everywhere in today’s security architecture. There are different token providers out there, but the one people are more familiar with is the JWT token. The token identifies a user. For example, your ID card could be used as a token. It identifies who you claim to be. The Id card would contain information like: ·         Firstname ·         Lastname ·         Age ·          Title The JSON Web Token The JSON Web Token contains some header information, a signature, and the token’s claims. In plain text, the claims might look like this: { "Name":"John doe", "UserId":5, "Email":"johndoe@gmail.com", "Role":"Boss" } The token header is used to specify some other things like signature algorithm, expiration date, the name of the issuer, and a few other attributes. Using Jwt In Asp.Net Web API The JwtAuthHandler cla
Read more

Coingate in .Net

-
Image
Accepting payment in Bitcoin C# Accepting payment on your e-commerce site, online stores and your custom website have never been easy, but with the Bitcoin Payment Gateway, it is a relief. There is a lot of BTC payment gateway on the internet which provides means for merchants to receive payment, Buy and Sell BTC, receive BTC in their local currency and also create digital wallets. The few providers out there are:   http://www.BitPay.com   http://coinbase.com http://coingate.com http://Gourl.io And lots more… BTC payment using Coingate Coingate allows you to buy and sell Bitcoin, accept Bitcoin using the merchant API. For Java/PHP developers, visit the developer section https://developer.coingate.com/ for implementation guide or you can download one of the examples listed.  In this tutorial, I am going to show you how to use C# to accept payment in BTC with Coingate. Before you can become a merchant you have to sign up and verify your account. For te
Read more