Autocomplete Without JQuery UI And Ajax ToolKit
As we know there is lots of auto complete provider apis, one of them is jquery auto complete plug-in and another is ajax auto complete control, we can implement auto complete functionally through these apis or ajax controls but there is some demerits of them below.
Demerits of jquery plug-in is very heavy plug-in make your page slower and increase of data size of page need to include auto complete css that also take some data size.
Demerits of ajax auto complete controls, Need script manager which render 4 or 5 .axd (JavaScript file) file taking more that 200 kb data size which is the cause of slower page speed and high page size.
Demerits of jquery plug-in is very heavy plug-in make your page slower and increase of data size of page need to include auto complete css that also take some data size.
Demerits of ajax auto complete controls, Need script manager which render 4 or 5 .axd (JavaScript file) file taking more that 200 kb data size which is the cause of slower page speed and high page size.
So why you guys use ajax auto complete or jquery auto complete plug-in thing about you own function, I have found an alternate solution for that.
Make your own handler (.ashx) or you can make you web service (.asmx), fetch data from your database parse it as json datatype.
Call this aspx handler file (just like a service) from jquery .ajax method make html with this json and append it at your auto complete div container apply css as you need.
Hander (AutoC.ashx) part :
Call this AutoC.ashx from jquery part:
Here is the javascript code that is almost include all functionality just like auto Complete ajax control or auto complete jquery plugin just copy and paste any f where in the page and bind main function with text box as below.
Function upAutoComplete take 5 arguments "event of textbox, Object of textbox, auto complete div Container Client id , data count and Local Handler Service URL" Data Count is for filtering record count from server side handler.
Function downAutoComplete takes 3 arguments event of textbox, object of textbox, autoComplete container id.
Or DownLoad Minify version of AutoComplete 2.0
Html part :
Here divContainer is the auto complete data container where data need to be append from jquery upAutoComplete Function.
Css part:
Css need to same name as given below "completionListItem" class applied with main Auto Complete divContainer, "completionListItem" applied with Each and every item of Aupto Complete divContainer, "ListElementOnFocus" applied with ListItem of Auto Complete divContainer item on keyBoard up and down selection.
<style type="text/css">
Make your own handler (.ashx) or you can make you web service (.asmx), fetch data from your database parse it as json datatype.
Call this aspx handler file (just like a service) from jquery .ajax method make html with this json and append it at your auto complete div container apply css as you need.
Hander (AutoC.ashx) part :
<%@ WebHandler Language="C#"
Class="AutoC"
%>
using System;
using
System.Web;
using
System.Text;
using
System.Collections.Generic;
using
System.Data;
using System.Web.Script.Serialization;
public class AutoC : IHttpHandler {
public bool IsReusable{ get{
return false;}
}
public void ProcessRequest(HttpContext
context)
{
JavaScriptSerializer
jr = new JavaScriptSerializer();
context.Response.ContentType = "application/json";
string
RawUrl = context.Request.RawUrl;
string data
= Encoding.UTF8.GetString(context.Request.BinaryRead(context.Request.TotalBytes));
Dictionary<string, string>
keyValue = jr.Deserialize<Dictionary<string, string>>(data);
string
prefixText = keyValue["prefixText"];
short
count=Convert.ToInt16(keyValue["count"]);
context.Response.Write(jr.Serialize(GetCompletionList(prefixText,
count)));
}
public static string[]
GetCompletionList(String prefixText, short count)
{
List<string> items = new
List<string>(count);
DataTable
dt = getData(prefixText, count);
for (int i = 0; i < dt.Rows.Count; i++)
items.Add(dt.Rows[i][0].ToString());
return
items.ToArray();
}
public static DataTable
getData(string SearchData,short count)
{
DataTable
dt = new DataTable();
dt.Columns.Add(new
DataColumn("result"));
for (int i = 0; i < count; i++)
{
DataRow
dr = dt.NewRow();
dr[0] = i + ")
" + SearchData;
dt.Rows.Add(dr);
}
return dt;
}
}
Call this AutoC.ashx from jquery part:
Here is the javascript code that is almost include all functionality just like auto Complete ajax control or auto complete jquery plugin just copy and paste any f where in the page and bind main function with text box as below.
Function upAutoComplete take 5 arguments "event of textbox, Object of textbox, auto complete div Container Client id , data count and Local Handler Service URL" Data Count is for filtering record count from server side handler.
Function downAutoComplete takes 3 arguments event of textbox, object of textbox, autoComplete container id.
<script type="text/javascript">
var $curLE = null;
function
upAutoComplete(e, txtObj, ContainerId, Count, ServiceUrl) {
var $this =
$(txtObj);
if
($this.val().length > 1) {
var keyCode =
[13, 37, 38, 39, 40];
var $ACCont =
$("#" + ContainerId);
if
(jQuery.inArray(e.keyCode, keyCode) == -1) {
data = "{prefixText:'"
+ $this.val() + "',count:'" +
Count + "'}";
$.ajax({
type: "POST",
url: ServiceUrl,
data: data,
contentType: "application/json;",
dataType: "json",
success: function(response)
{
var
divHtml = "";
var id
= 0;
var
onClk = "clickAutoCompleteLE(this,'"
+ $this.attr('id') + "','" + ContainerId + "')";
$.each(response, function() {
id = id + 1;
divHtml += "<div
id='divLE" + id + "'
onclick=" + onClk + "
class='completionListItem'>" + this
+ "</div>";
});
$ACCont.html(divHtml).css("display", "block");
$curLE = null;
},
error: function(xhr,
ajaxOptions, thrownError) {
alert(xhr.status + ' ' + ajaxOptions + '
' + thrownError);
}
});
$this.blur(function()
{ hideAutoComplete(ContainerId); });
$ACCont.mouseover(function()
{
$this.unbind('blur');
}).mouseout(function()
{
$this.blur(function()
{
hideAutoComplete(ContainerId);
});
});
}
}
else {
hideAutoComplete(ContainerId);
}
}
function
clickAutoCompleteLE(divObj, txtId, ContainerId) {
$("#"
+ txtId).val($(divObj).text());
$("#"
+ ContainerId).html("").css("display", "none");
}
function
hideAutoComplete(ContainerId) {
$curLE = null;
$("#" + ContainerId).html("").css("display",
"none");
}
function
downAutoComplete(e, txtObj, ContainerId) {
var $this =
$(txtObj);
var FirstLE =
$("#" + ContainerId + " :first");
var LastLE =
$("#" + ContainerId + " :last");
var keyCode =
[13, 38, 40];
if
(jQuery.inArray(e.keyCode, keyCode) != -1) {
if ($curLE !=
null) {
if
(($curLE.attr("id") ==
FirstLE.attr("id")) &&
e.keyCode == 38) {
removCssLE(); $curLE = null;
}
else if (($curLE.attr("id")
== LastLE.attr("id")) &&
e.keyCode == 40) {
removCssLE(); $curLE = null;
}
}
if (e.keyCode
== 40) {
if
($curLE == null) {
$curLE = FirstLE; addCssLE();
}
else {
removCssLE(); $curLE = $curLE.next();
addCssLE();
}
}
else if (e.keyCode == 38) {
if
($curLE == null) {
$curLE = LastLE; addCssLE();
}
else {
removCssLE(); $curLE = $curLE.prev();
addCssLE();
}
}
else if (e.keyCode == 13) {
if
($curLE != null) e.preventDefault()
$this.val($curLE.text());
$curLE.parent().html("").css("display", "none");
$curLE = null;
}
}
}
function addCssLE()
{
$curLE.addClass("ListElementOnFocus");
}
function
removCssLE() {
$curLE.removeClass("ListElementOnFocus");
}
</script>
Here is two main function need to
bind with textbox KeyUp and KeyDown Event that is upAutoComplete Function and downAutoComplete
Function.
<script type="text/javascript">
$(document).ready(function() {
$("#txtAutoComplete").bind("keydown", function(e)
{ downAutoComplete(e, this, 'divContent') });
$("#txtAutoComplete").bind("keyup", function(e)
{ upAutoComplete(e, this, 'divContent', '10','AutoC.ashx') });
});
</script>
Html part :
Here divContainer is the auto complete data container where data need to be append from jquery upAutoComplete Function.
<asp:TextBox ID="txtAutoComplete" runat="server" Width="365px" autocomplete="off"
/>
<div id="divContent" class="completionListElement" runat="server"
style="display: none; max-height: 300px;">
Css part:
Css need to same name as given below "completionListItem" class applied with main Auto Complete divContainer, "completionListItem" applied with Each and every item of Aupto Complete divContainer, "ListElementOnFocus" applied with ListItem of Auto Complete divContainer item on keyBoard up and down selection.
<style type="text/css">
.completionListItem
{ border: 1px dotted #ACACAC; color: #006699; cursor: pointer; padding: 0 0 3px 3px; }
.completionListItem:hover
{ background-color: #A5A5A5;
color: White; cursor: pointer; }
.completionListElement
{ background-color: White;
border: 1px solid #ACACAC; font-family: Arial,sans-serif;
font-size: 9pt; width: 376px; }
.ListElementOnFocus
{ background-color: #A5A5A5;
color: White; cursor: pointer; }
</style>
Download Autocomplete Without JQuery UI And Ajax ToolKit Full Code
DownLoad DotnetBull Auto Complete 2.0 |
| Autocomplete Without JQuery UI And Ajax ToolKit Demo |
