August 25, 2011 07:07 by
Scott
August 17, 2011 08:33 by
ScottAt times you need to show some AutoComplete dropdown below a textbox as you starts typing. So that you can select any suggested text from the below list. Ajax Control toolkit will do this job quite easily but for those who doesn't want to use Ajax Control toolkit, JQuery is like another option by which they can replicate everything available in Ajax Control toolkit quite easily. Here we will see how we can make our own AutoComplete using JQuery and WCF.
Add a textbox and a script manager with reference to service.
<asp:ScriptManager ID="scr" runat="server">
<Services>
<asp:ServiceReference Path="~/Service.svc" />
</Services>
</asp:ScriptManager>
<div>
<label for="city">
Your city:
</label>
<input id="Question" type="text" />
</div>
Add this JQuery in head tag of your page.
<script type="text/javascript" language="javascript">
$("#Question").bind('keyup', function (e) {
var str = "";
if (e.keyCode == 13) { return false; }
var left = $("#Question").offset().left;
$("#autocom").remove();
$("#Question").after("<div id='autocom' class='popup'><div>")
SecServices.Service.GetTagString($("#Question").val(),
function (data) {
$("#autocom").append("<table cellpadding='1' cellspacing='1' width='100%'>");
$.each(data, function (index, elem) {
$("#autocom").append("<tr><td onclick='setText(this)' class='popuptd'>" + elem.Question + "</td></tr>");
});
$("#autocom").append("</table>");
});
$("#autocom").slideDown('slow');
$("#autocom").css("left", left);
$("#autocom").width($("#Question").width);
$("#Question").bind("keypress", "setTextKeyPress");
$("#autocom").bind('focusout', function () {
$("#autocom").slideUp('slow');
});
});
function setText(td) {
$("#Question").val($(td).html());
$("#autocom").slideUp('slow');
}
</script>
Add Some style
<style type="text/css">
.popup
{
background-color:#F0F0F0;
padding-left:100px;
overflow:auto;
position:absolute;
border:1px solid gray;
padding: 5px 5px 5px 5px;
}
.popuptd
{
color:Black;
}
.popuptd:hover
{
border: 1px solid #F4A83D;
}
</style>
and finally create a WCF service.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
[ServiceContract(Namespace = "RelSecServices")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
public Questions[] GetTagString(string term)
{
using (RelsecModel.RelsecEntities context = new RelsecModel.RelsecEntities())
{
var query = from c in context.msSecurityQuestions
where c.Question.StartsWith(term)
select new Questions() { id = c.Id, Question = c.Question };
return query.ToArray();
}
}
}
August 5, 2011 09:19 by
ScottIn this article below version of scripts are used
jQuery version 1.4.1
jQuery UI version 1.8.6
We will create 2 example with WCF service.
First of all we will create a WCF service and configure it to response as json format.
We will bind endpoint with webHttpBinding. We will create service with name “AutoComplete” and our interface will be IAutoComplete. We will create an endpoint behavior which uses webHttp behavior. So our web.config file will have configuration as below.
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="webHttpEndpoint">
<webHttp />
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<service behaviorConfiguration="jQueryExamples.Services.AutoComplete.AutoCompleteBehavior"
name="jQueryExamples.Services.AutoComplete.AutoComplete">
<endpoint address="" binding="webHttpBinding"
contract="jQueryExamples.Services.AutoComplete.IAutoComplete"
behaviorConfiguration="webHttpEndpoint">
<identity>
<dns value="localhost" />
</identity>
</endpoint>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
</service>
</services>
</system.serviceModel>
Now we will add reference of System.ServiceModel.Web to our application, because we will be using some of its features.
Example 1
In our first example of jQuery autocomplete, we will create a WCF service method which will return simple string array.
In our interface we will create method GetTagString which will return us string array.
[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GetTagString?term={term}",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
string[] GetTagString(string term);
In above declaration you will be able to find that apart from OperationContract there are some more attributes are assigned to method. WebInvoke attribute is part of System.ServiceModel.Web. WebInvoke adds meta data to the service method, provide operation behavior and verb on which method will be invoked. Method parameter will define which method will be used for invocation, we will use GET. UriTemplate will define url template in the service and bind url parameter to method parameter. We will use RequestFormat and ResponseFormat as WebMessageFormat.Json.
We will implement the interface and write below method into AutoComplete.svc file.
public string[] GetTagString(string term)
{
string[] tags = //Your logic to retive tags
return tags.Where(t => t.StartsWith(term, StringComparison.InvariantCultureIgnoreCase)).ToArray();
}
Currently I have used static array of tags and then filtered it with LINQ to response only those items which are starting with the term our autocomplete have provided.
Now on the aspx page, we will create a html input and then add a script to add auto complete to it.
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags" />
</div>
And our script to initialize autocomplete will be
<script type="text/javascript" language="javascript">
$(function () {
$("#tags").autocomplete({
source: "Services/AutoComplete/AutoComplete.svc/GetTagString"
});
});
</script>
In the JavaScript function we have created autocomplete with URL to our AutoComplete.svc as source and followed by our method name which will be requested each time user hit a key.
So it will give us output as below.
This output and method of autocomplete is not much different from the original jQuery example. The only difference is we have created autocomplete with a WCF service.
Example 2
In above example we have created autocomplete with only names. In real life scenario we have different requirements as well. One of the scenario is when we retrieve a tag name we need its id as well. So how we will achieve it with modification in our above example.
To achieve it we need to first change original jquery.ui.autocomplete.js file. We will add our function into this file so that our example works perfect.
As first item we will add a “normalize” option in the autocomplete widget options. Its declaration will be look like-
$.widget("ui.autocomplete", {
options: {
appendTo: "body",
delay: 300,
minLength: 1,
position: {
my: "left top",
at: "left bottom",
collision: "none"
},
source: null,
normalize: null
}
//Further code
Second step will be the use of normalize function in code. We will modify the call in _response method. Now this method will look like -
_response: function (content) {
if (content && content.length) {
content = (this.options.normalize != null) ? this.options.normalize(content) : this._normalize(content);
this._suggest(content);
this._trigger("open");
} else {
this.close();
}
this.element.removeClass("ui-autocomplete-loading");
}
We have put a check that if normalize function defined by us is not null then we will call it otherwise we will call default _normalize function. You must have question that what does this normalize function will do. Normalize function will parse our service response and pass it to autocomplete so that it can generate the output.
HTML for second example is as below -
<div class="ui-widget">
<label for="tags">
Tags object:
</label>
<input id="tags2" />
<label id="lblId">
</label>
</div>
In html we have added a label as “lblId” and we require autocomplete to add id of the tag to this label. You can also use hidden field to store the id. We will modify our WCF method, JavaScript to initialize autocomplete
We will create a class named Tags which will have property of tag name and id.
[DataContract]
public class Tags
{
[DataMember]
public int id { get; set; }
[DataMember]
public string tagName { get; set; }
}
We have applied DataContract attribute to our class so that it can be transferred with out WCF service.
Our WCF Service Method definition in interface will be as below
[OperationContract]
[WebInvoke(Method = "GET", UriTemplate = "GetTagObject?term={term}",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
List<Objects.Tags> GetTagObject(string term);
In above method we have returned a list of our class Tags. Hence implementation of this method will be as follows
public List<Objects.Tags> GetTagObject(string term)
{
List<Objects.Tags> lstTags = new List<Objects.Tags>();
//Logic to retive list of tags
return lstTags.Where(t => t.tagName
.StartsWith(term, StringComparison.InvariantCultureIgnoreCase))
.ToList();
}
In above example I have added items manually to list and then filtered it with LINQ to return desired output.
now we will initialize autocomplete with script
$(function () {
$("#tags2").autocomplete({
source: "Services/AutoComplete/AutoComplete.svc/GetTagObject",
normalize: function (items) {
if (items.length && items[0].label && items[0].value) {
return items;
}
return $.map(items, function (item) {
return $.extend({
label: item.tagName,
value: item.id
}, item);
});
},
select: function (event, data) {
$('#tags2').val(data.item.tagName);
$('#lblId').text(data.item.id);
return false;
}
});
});
In above script we have specified two functions in the options. One is normalize and another is select. I will first explain normalize (which I have created with reference from jQuery’s original _normalize function) it will have items as input. When jQuery request to our service it will parse the response as json and pass it to normalize function. In first if block we have checked that whether json output contains label and value as attribute then we will return same items as output to process further. We will note here that if we always want to use label and value as class member then we do not need to modify autocomplete.js file. Now after the if block we have mapped our data with assigning tagName and id to label and value respectively. So autocomplete can parse our item and display us the autocomplete menu.
In select function we will specify that when user select an item how should it be processed with the data. In our case we have assigned tagName to our textbox value and id to our label text.
When we run our code it will provide us output as below
With this logic you can create your own autocomplete and even you can convert your dropdowns into a nice autocomplete.