In this article i will explain how to display Image with Auto Complete search in Asp.net Using JQuery.
here we can use our own custom data formats and displays by simply overriding the default focus and select actions.
Declare web methods in Code behind and call those methods in our page using JQuery.
Step 1
Download UI Autocomplete Plugin from the following Link
JQuery UI 1.9.2
Step 2
First we need to create a database,give the database name as AppTest and create a single table such as Developer, where we can store developer information.,it is look like this
Click on Image for better View
Step 3
Insert a Data in Developer table,it is look like this
here we can use our own custom data formats and displays by simply overriding the default focus and select actions.
Declare web methods in Code behind and call those methods in our page using JQuery.
Step 1
Download UI Autocomplete Plugin from the following Link
JQuery UI 1.9.2
Step 2
First we need to create a database,give the database name as AppTest and create a single table such as Developer, where we can store developer information.,it is look like this
USE AppTest CREATE TABLE Developer ( Name Nvarchar(50) NULL, Speciality Nvarchar(50) NULL, [Image] Nvarchar(50) NULL )
Click on Image for better View
Step 3
Insert a Data in Developer table,it is look like this
INSERT INTO Developer
(Name,Speciality,Image)
VALUES
('Bhushan Pawar','SEO & Sql Database','Bhushan.jpg')
INSERT INTO Developer
(Name,Speciality,Image)
VALUES
('Ramdas Bhosale','Web Application','Ramdas.jpg')
INSERT INTO Developer
(Name,Speciality,Image)
VALUES
('Kishor Naik','Window Application','Kishor.jpg')
Click on Image for better View
Step 4
Create a Web Application and give the solution name as SolCustomAutoCompleteBoxJquery.
Step 5
Add CSS and Script files which we downloaded from Above Link,it is look like this
CSS
SCRIPT
Click on Image for better View
Step 6
Add images in Folder,Create a New Folder in the Solution and give folder name as Images,it is look like this
Click on Image for better View
Step 7
Add App_Code folder in the solution and add a New Folder inside the App_Code folder and give folder name as ORD,it is look like this
Click on Image for better View
Step 8
Add a Linq to Sql class,Select the ORD folder,right click on Add new Item,select LINQ to SQL classes from installed Visual Studio templates and name it DeveloperDC and click on add button,it is look like this
Click on Image for better View
Step 9
Open a O/R Designer by double click on DeveloperDC.dbml,it is look like this
Click on Image for better View
Click on Image for better View
Visual stdio provides an object-relational mapping designer,called the O/R Designer which allows you to visually design the object to database mapping.
Step 10
Create a Developer object that will use LINQ to SQL to map to this table.go to the Server Explorer,select AppTest database,go to the Tables and select Developer table,it is look like this
Click on Image for better View
Drag and drop Developer table from Server explorer onto the design surface of the O/R Designer,it is look like this
Click on Image for better View
Step 11
Create a Developer static class in App_Code folder for retriving an Developer data from database,it is look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for Developer
/// </summary>
public static class Developer
{
#region Methods
/// <summary>
/// Retriving Developer Data from Table
/// </summary>
/// <param name="SearchText">Specify the Search text</param>
/// <returns>List</returns>
public static List<ORD.Developer> GetdeveloperData(String SearchText)
{
try
{
ORD.DeveloperDCDataContext DC = new ORD.DeveloperDCDataContext();
// Using Linq
var Query = (from Q in DC.Developers
where Q.Name.Contains(SearchText)
select Q).ToList<ORD.Developer>();
// Using Lambda Expression
//var Query = DC.Developers.Where(LE => LE.Name.Contains(SearchText)).Select(LE => LE).ToList<ORD.Developer>();
return Query;
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
#endregion
}
Step 12
Create a Web Method in Default.aspx.cs for call Web Method from JSON function.it is look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region Methods
/// <summary>
/// Bind Data
/// </summary>
/// <param name="SearchText">Specify the Search Text Box</param>
/// <returns>Array of ORD.Developer</returns>
[WebMethod]
public static ORD.Developer[] BindAutoCompleteBox(String SearchText)
{
try
{
List<ORD.Developer> List = Developer.GetdeveloperData(SearchText);
return List.ToArray();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
#endregion
}
Generally we will create static web methods in webservice and we will use those methods to call it from JQuery instead of that directly we can create static methods with [WebMethod] attribute in our code behind file and use those methods from JQuery.
Now Server side code part done,let move to the Client Side.
Step 13
Add a TextBox in Page,it is look like this
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
Step 14
Add CSS file Reference inside the head tag of the page,it is look like this
<link type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" rel="Stylesheet" rev="Stylesheet" />
Step 15
Add JQuery and UI file Reference inside the head tag of the page,it is look like this
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-ui-1.9.2.custom.min.js"></script>
Step 16
Call a Page Web Method in JQuery for binding Custom Data,it is look like this
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%=txtSearch.ClientID %>').autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
// Specify the Full Path of Page and Exact Fucntion Name
url: "Default.aspx/BindAutoCompleteBox",
// Specify the Exact Parameter Name which you specified in Function
data: "{'SearchText':'" + $('#<%=txtSearch.ClientID %>').val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Issued in Database.");
}
});
},
//Triggered when focus is moved to an item
focus: function (event, ui) {
$("#txtSearch").val(ui.item.Name);
return false;
},
//Triggered when an item is selected from the menu.
select: function (event, ui) {
$("#txtSearch").val(ui.item.Name);
return false;
},
// Create a Custome Format to dispaly Data in TextBox
}).data('autocomplete')._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a style = 'vertical-align:top'>" +
"<img style = 'vertical-align:middle;width:60px;height:60px' src='Images/" + item.Image + "'/>" +
"Developer Name :" + item.Name +
"<br/>"+
"Speciality :" + item.Speciality +
"<hr/>" +
"</a>"
).appendTo(ul);
};
});
</script>
This is the function declaration of JSON format we are using this JSON function to call web methods using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. Here type, ContentType are same for all functions only dataType, url, data and success and error parameters will vary based on our requirement.
- Path : Path of our WebMethod.
- data : Pass Parameter.
- success : Once our web method execution completed then success function will execute and return required data.
- error : This parameter is used to display required error message whenever we get problem.
- Focus Event :
- Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction.
- Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
- Select Event :
- Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item.u. The default action is to replace the text field's value with the value of the selected item.
- Canceling this event prevents the value from being updated, but does not prevent the menu from closing.
- Data : Create Custom Format to display data.
Full Code of .ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Custom AutoCompleteTextBox in Jquery</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" rel="Stylesheet" rev="Stylesheet" />
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#<%=txtSearch.ClientID %>').autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
// Specify the Full Path of Page and Exact Fucntion Name
url: "Default.aspx/BindAutoCompleteBox",
// Specify the Exact Parameter Name which you specified in Function
data: "{'SearchText':'" + $('#<%=txtSearch.ClientID %>').val() + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Issued in Database.");
}
});
},
//Triggered when focus is moved to an item
focus: function (event, ui) {
$("#txtSearch").val(ui.item.Name);
return false;
},
//Triggered when an item is selected from the menu.
select: function (event, ui) {
$("#txtSearch").val(ui.item.Name);
return false;
},
// Create a Custome Format to dispaly Data in TextBox
}).data('autocomplete')._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a style = 'vertical-align:top'>" +
"<img style = 'vertical-align:middle;width:60px;height:60px' src='Images/" + item.Image + "'/>" +
"Developer Name :" + item.Name +
"<br/>"+
"Speciality :" + item.Speciality +
"<hr/>" +
"</a>"
).appendTo(ul);
};
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Output
Download
Download Source Code
sir its innovating.. means we can add image file also with that name..??
ReplyDeleteYes..you can add image with image file name....
DeleteThankq brother...
ReplyDeleteMost Welcome Sister......
ReplyDelete