Following the approach from the last article, we can use the same one to build an AjaxControlToolkit AutoComplete with image or other plug-in elements in front of each item in CompletedList. Every word is in the below code.
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
<ajaxToolkit:AutoCompleteExtender
runat="server" OnClientPopulated="onClientPopulated" OnClientItemSelected="itemSelected"
BehaviorID="AutoCompleteEx"
ID="autoComplete1"
TargetControlID="myTextBox"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList3"
MinimumPrefixLength="2"
CompletionInterval="1000"
CompletionSetCount="8"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
DelimiterCharacters=";, :">
</ajaxToolkit:AutoCompleteExtender>
</form>
<script type="text/javascript">
function itemSelected(ev)
{
var index=$find("AutoCompleteEx")._selectIndex;
if(index!=-1)
$find("AutoCompleteEx").get_element().value=$find("AutoCompleteEx").get_completionList().childNodes[index]._value;
}
function onClientPopulated(sender,e)
{
var comletionList=$find("AutoCompleteEx").get_completionList();
for(i=0;i<comletionList.childNodes.length;i++)
{
var _value=comletionList.childNodes[i]._value;
var text=_value[0];
var moreText=_value[1];
var imgeUrl= _value[2];
comletionList.childNodes[i]._value=text;
comletionList.childNodes[i].innerHTML="<table><tr><td><img src="+imgeUrl+" /></td><td>"+text+"<br />"+moreText+"</td></tr></table>";
}
}
</script>
</body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
<ajaxToolkit:AutoCompleteExtender
runat="server" OnClientPopulated="onClientPopulated" OnClientItemSelected="itemSelected"
BehaviorID="AutoCompleteEx"
ID="autoComplete1"
TargetControlID="myTextBox"
ServicePath="AutoComplete.asmx"
ServiceMethod="GetCompletionList3"
MinimumPrefixLength="2"
CompletionInterval="1000"
CompletionSetCount="8"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
DelimiterCharacters=";, :">
</ajaxToolkit:AutoCompleteExtender>
</form>
<script type="text/javascript">
function itemSelected(ev)
{
var index=$find("AutoCompleteEx")._selectIndex;
if(index!=-1)
$find("AutoCompleteEx").get_element().value=$find("AutoCompleteEx").get_completionList().childNodes[index]._value;
}
function onClientPopulated(sender,e)
{
var comletionList=$find("AutoCompleteEx").get_completionList();
for(i=0;i<comletionList.childNodes.length;i++)
{
var _value=comletionList.childNodes[i]._value;
var text=_value[0];
var moreText=_value[1];
var imgeUrl= _value[2];
comletionList.childNodes[i]._value=text;
comletionList.childNodes[i].innerHTML="<table><tr><td><img src="+imgeUrl+" /></td><td>"+text+"<br />"+moreText+"</td></tr></table>";
}
}
</script>
</body>
Web Method:
[WebMethod]
public string[] GetCompletionList3(string prefixText, int count)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
List<string> items = new List<string>(3);
for (int i = 0; i < 3; i++)
{
object[] item = new object[] { prefixText + "text"+i.ToString(), "moreText","images/demo.gif" };
items.Add(jss.Serialize(item));
}
return items.ToArray();
}
public string[] GetCompletionList3(string prefixText, int count)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
List<string> items = new List<string>(3);
for (int i = 0; i < 3; i++)
{
object[] item = new object[] { prefixText + "text"+i.ToString(), "moreText","images/demo.gif" };
items.Add(jss.Serialize(item));
}
return items.ToArray();
}
8 comments:
how can i make with MS-sql auto complete
To Anonymous:
You have to use web service or pagemethod to access the database and fetch the data to the autoComplete
Thanks its working with database.but how can i resize image size.
Everything is working perfect.Just i need CSS Style like facebook auto suggest.
Thanks
Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!
Hi Vince,
When using the example with JavaScriptSerializer, it does not seem to deserialize properly and as a result i see the value coming in full json notation enclosed between "[" brackets.
Do you know how to work around this?
Thanks
Hi Vince,
Just like you placed an image inside the list item I need to place a button inside the ListItem. I did this much by appending an input tag to the innerHTML.
And then on the client side click event of the button I have to call a javascript function.
The problem is that "The moment I click the button the autocomplete list vanishes and no button's click event does not fire"
Can anyone help me ?
Hi Vince,
just write:
var _value = JSON.parse(comletionList.childNodes[i]._value);
Post a Comment