Monday, November 3, 2008

Custom AutoComplete 2: AutoComplete with Image

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>


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();
    }

8 comments:

Anonymous said...

how can i make with MS-sql auto complete

Vince Xu said...

To Anonymous:
You have to use web service or pagemethod to access the database and fetch the data to the autoComplete

Anonymous said...

Thanks its working with database.but how can i resize image size.

Anonymous said...

Everything is working perfect.Just i need CSS Style like facebook auto suggest.

Thanks

Anonymous said...

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!

Anonymous said...

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

Anky Da Gr8 said...

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 ?

Anonymous said...

Hi Vince,
just write:
var _value = JSON.parse(comletionList.childNodes[i]._value);