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

Sending Notification Message with Firebase with JavaScript and .Net client

-
Image
Sending Notification Message with Firebase with JavaScript and ASP.Net client Introduction to Firebase Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost.   FCM server has two components for sending and receiving messages which are: The trusted environment (app server) FCM servers It is the job of the app server to send the message to the FCM server which then sends the message to the client device. The trusted environment can be an app server for sending messages; you can also use the Admin SDK or HTTP and XMPP APIs. The work of the server is to forward the message to the FCM server which then sends to the client. Find out more about how it works here: https://firebase.google.com/docs/cloud-messaging/   In this tutorial, I will show you how to use firebase using JavaScript client to send token and notification messages to the FCM Legacy server. Setting up Firebase Cloud Me...
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 JwtA...
Read more