A nice css style for ajax autoComplete Extender

Question

I would really like to stay with my current implementation of auto-complete done via ajax toolkit, as it was relatively easy to implement it via C#.

I could see the jQuery autocomplete has a lot of styling themes, like in links below (rounded corners, well designed style, etc.)

• Link1
• Link2

How could I set a CssStyle like that on an AjaxToolKit AutoComplete Extender ?

If there is someone that knows how to simply do it, or has a nice style ready to be used or even a link, I will really appreciate it.

Answer 1

trying the first link from search you get this great tutorial on how to style

AjaxToolKit AutoComplete Extender

http://vijaysinghnegi.blogspot.com/2012/04/best-css-style-for-autocomplete.html

the reason why jquery make look so stylish is because they provide a default style to it

but whit AjaxToolKit AutoComplete Extender you got to play with CSS to make it look the way you want

<style type="text/css">
    /*AutoComplete flyout */
    .completionList {
        border: solid 1px #444444;
        margin: 0px;
        padding: 2px;
        height: 100px;
        overflow: auto;
        background-color: #FFFFFF;
    }

    .listItem {
        color: #1C1C1C;
    }

    .itemHighlighted {
        background-color: #ffc0c0;
    }
</style>

 CompletionListCssClass="completionList"
 CompletionListHighlightedItemCssClass="itemHighlighted"
 CompletionListItemCssClass="listItem"

Answer 2

I've created a Meteor autocomplete extender, which allows both free text and multiple autocomplete sources. Meteor's data model allows for fast multi-rule searching with custom rendered lists.

I used the CSS style from jquery-sew. See their demo here or the CSS here.