Click here to Skip to main content
Click here to Skip to main content

AJAX AutoComplete with prefix image

, 29 Oct 2009
Rate this:
Please Sign up or sign in to vote.
Customized AutoComplete to render image and text.

Introduction

When I was playing with the AutoCompleteExtender, I wondered if it could be extended to include a prefix image as well. Doing it was straightforward with some JavaScript functions. I am sharing the same here for those of you who might find it useful. To make the sample interesting and useful, I’ve included the icons for flags of different nations across the world. (Thanks to www.MarkFennell.com for the icon resource.)

What I have done

  1. I’ve created a textbox with AutoCompleteExtender
  2. Added the AutoCompletePage method and made it return the list of countries matching the prefix text
  3. Wrote a couple of JavaScript functions to handle image rendering and value selection

The code

The following code is available in the AutoCompletePage method:

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{     
    //Read the countries.xml file into a dataset
    DataSet ds = new DataSet();
    ds.ReadXml(contextKey);

    if (ds.Tables.Count == 0 || ds.Tables[0].Rows.Count == 0)
        return default(string[]);
    List<=<string> items = new List<string>(ds.Tables[0].Rows.Count);
    //For every row in the dataset matching the prefix text include the 
    //image name and the country name
    foreach (DataRow row in ds.Tables[0].Rows)
    {
        if (row["name"].ToString().ToUpper().StartsWith(prefixText.ToUpper()))
        {
            items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(
              row["name"].ToString(), 
              "../flagicons/" + row["code"].ToString() + ".gif"));
        }
    }
    return items.ToArray();
}

JavaScript functions are included to render the image and to select the text value while selecting:

<script type="text/javascript">
// Find the autocompleteextender and set the text as value selected
function OnItemSelected(event)
{
    var selInd = $find("AutoCompleteEx")._selectIndex;
    if(selInd != -1)
        $find("AutoCompleteEx").get_element().value = 
          $find("AutoCompleteEx").get_completionList().childNodes[selInd]._value;
}

function OnClientPopulated(sender,eventArgs)
{
    //Find the autocompleteextender list
    var autoList = $find("AutoCompleteEx").get_completionList();
    for(i=0;i<autoList.childNodes.length;i++)
    { 
        // Consider value as image path
        var imgeUrl = autoList.childNodes[i]._value; 
        //First node will have the text
        var text = autoList.childNodes[i].firstChild.nodeValue; 
        autoList.childNodes[i]._value=text;
        //Height and Width of the mage can be customized here...
        autoList.childNodes[i].innerHTML="<img height=18 width=30 src="+imgeUrl+" /> "+text;
    } 
}
</script>   
    <script type="text/javascript"></script>

Conclusion

The above article shows how easily the AutoCompleteExtender can be tweaked and customized for rendering images. The same logic can be extended to any customization that you might need!

History

  • Created: 30th October 2009.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Aparna Lakshminarayanan
Software Developer (Senior)
India India
She has been working on .Net since 2005. Has recently started working on AJAX and ASP .NET and just Loves this technology!

Comments and Discussions

 
QuestionNice work PinmemberMember 1053117519-Jan-14 4:05 
Questionadd p.k. behind autocomplete Pinmembermhn_namak8-Oct-11 4:53 
Generalthanks for sharing and gr8 job Pinmemberdeeps33612-Jun-10 10:40 
GeneralGood PinmemberJhek11-Nov-09 1:57 
GeneralGood job PinmemberTorben712-Nov-09 19:24 
GeneralRe: Good job PinmemberAparna Lakshminarayanan3-Nov-09 17:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 29 Oct 2009
Article Copyright 2009 by Aparna Lakshminarayanan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid