Autosuggest style

Last post 05-05-2009 2:45 AM by Vince Xu - MSFT. 4 replies.

Sort Posts:

  • Autosuggest style

    04-30-2009, 4:24 PM
    • Member
      50 point Member
    • marcelocr2
    • Member since 05-16-2007, 3:34 AM
    • Posts 34

    hi

    i have an autosuggest that is like this

    <ajaxToolkit:AutoCompleteExtender

    runat="server"

    BehaviorID="AutoCompleteEx"

    ID="autoComplete1"

    TargetControlID="txtnombre"

    ServicePath="autocompleta.asmx"

    ServiceMethod="nombres"

    MinimumPrefixLength="2"

    CompletionInterval="250"

    EnableCaching="true"

    CompletionSetCount="10"

    CompletionListCssClass="autocomplete_completionListElement"

    CompletionListItemCssClass="autocomplete_listItem"

    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

    OnClientItemSelected="setValue"

     

    ShowOnlyCurrentWordInCompletionListItem="true" >

     

    <Animations>

    <OnShow>

    <Sequence>

    <OpacityAction Opacity="0" />

    <HideAction Visible="true" />

     

     

     

     

     

     

     

     

     

     

    <ScriptAction Script="

    // Cache the size and setup the initial size

    var behavior = $find('AutoCompleteEx');

    if (!behavior._height) {

    var target = behavior.get_completionList();

    behavior._height = target.offsetHeight - 2;

    target.style.height = '0px';

    }" />

     

     

     

     

     

     

     

     

     

     

    <Parallel Duration=".4">

    <FadeIn />

    <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />

    </Parallel>

    </Sequence>

    </OnShow>

    <OnHide>

     

     

     

     

     

     

    <Parallel Duration=".4">

    <FadeOut />

    <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />

    </Parallel>

    </OnHide>

    </Animations>

    </ajaxToolkit:AutoCompleteExtender>

    and a stylesheet that is:

    body {

    }

    .autocomplete_completionListElement

    {

    visibility : hidden;

    margin : 0px!important;

    background-color : inherit;

    color : windowtext;

    border : buttonshadow;

    border-width : 1px;

    border-style : solid;

    cursor : 'default';

    overflow : auto;

    height : 200px;

    text-align : left;

    list-style-type : none;

    }

    /* AutoComplete highlighted item */

    .autocomplete_highlightedListItem

    {

    background-color: #ffff99;

    color:Yellow;

    padding: 1px;

    }

    /* AutoComplete item */

    .autocomplete_listItem

    {

    background-color : window;

    color : windowtext;

    padding : 1px;

    }

    the problem is that i want to make it wider and to highlight it when the mouse is over an item in the suggestion

    thank you

     

  • Re: Autosuggest style

    05-01-2009, 7:05 AM
    • Member
      299 point Member
    • soharadesign
    • Member since 04-29-2009, 8:46 AM
    • Hemel Hempstead, UK
    • Posts 69

    Typically, your suggestion list will be the same width as your text entry box (txtnombre) - You should be able to make it wider however by adding the following to autocomplete_completionListElement:

     

    width: 400px !important;
     

     The !important tag will override any subsequent width settings, thus setting the width of the search results to what you need.

     

    As for highlighting on mouseover, surely CompletionListHighlightedItemCssClass handles that for you already?

    Steve O'Hara

    Sohara Design
  • Re: Autosuggest style

    05-01-2009, 1:18 PM
    • Member
      50 point Member
    • marcelocr2
    • Member since 05-16-2007, 3:34 AM
    • Posts 34

    thank you!!! that helped me, but about highlighting on mouseover CompletionListHighlightedItemCssClass doesnt work, i change the color and it apears the same...am i doing something wrong??

  • Re: Autosuggest style

    05-02-2009, 1:59 PM
    • Member
      299 point Member
    • soharadesign
    • Member since 04-29-2009, 8:46 AM
    • Hemel Hempstead, UK
    • Posts 69
    Try adding !important to your background css tag: background: #0000ff !important; Are you using a mac by any chance?
    Steve O'Hara

    Sohara Design
  • Re: Autosuggest style

    05-05-2009, 2:45 AM
    Answer

    Hi,

    It needs do some JavaScript on client in ItemOver event of AutoComplete. You can check this link http://vincexu.blogspot.com/2009/01/custom-autocomplete-5-build-additional.html to custom the style of AutoComplete.


    Vince Xu
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Page 1 of 1 (5 items)