Click here to Skip to main content
13,862,316 members
Click here to Skip to main content
Add your own
alternative version


40 bookmarked
Posted 29 Oct 2009
Licenced CPOL

AJAX AutoComplete with prefix image

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


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

    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()))
              "../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 = 

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


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!


  • Created: 30th October 2009.


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!

You may also be interested in...

Comments and Discussions

QuestionNice work Pin
Member 1053117519-Jan-14 5:05
memberMember 1053117519-Jan-14 5:05 
Questionadd p.k. behind autocomplete Pin
mhn_namak8-Oct-11 5:53
membermhn_namak8-Oct-11 5:53 
Generalthanks for sharing and gr8 job Pin
deeps33612-Jun-10 11:40
groupdeeps33612-Jun-10 11:40 
GeneralGood Pin
Jhek11-Nov-09 2:57
memberJhek11-Nov-09 2:57 
GeneralGood job Pin
Torben712-Nov-09 20:24
memberTorben712-Nov-09 20:24 
GeneralRe: Good job Pin
Aparna Lakshminarayanan3-Nov-09 18:29
memberAparna Lakshminarayanan3-Nov-09 18:29 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190214.1 | Last Updated 29 Oct 2009
Article Copyright 2009 by Aparna Lakshminarayanan
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid