Change Style of Autocomplete

[Stuart]

Can you please tell me the easiest way to make the background colour of the Autocomplete text field white and the border a thin black line on all 4 sides (I am using the Material theme)?

[Vignesh Srinivasan]

Hi Stuart, 

 

We can achieve your requirement using our HtmlAttributes property. kindly refer the below code example to add the style attributes to the AutoComplete component.  

 

Code Snippet:  

 

<div class="col-lg-12 control-section"> 

    <div class="control_wrapper"> 

        <SfAutoComplete TValue="string" TItem="GameFields" Placeholder="e.g. Basketball" DataSource="@Games" HtmlAttributes="@htmlAttribute"> 

            <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings> 

        </SfAutoComplete> 

    </div> 

</div> 

@code{ 

    public class GameFields 

    { 

        public string ID { get; set; } 

        public string Text { get; set; } 

    } 

    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 

    { 

        { "style", "background-color: white; border: thin solid black" }, 

    }; 

 

    public List<GameFields> Games = new List<GameFields>() 

{ 

        new GameFields(){ ID= "Game1", Text= "American Football" }, 

        new GameFields(){ ID= "Game2", Text= "Badminton" }, 

        new GameFields(){ ID= "Game3", Text= "Basketball" }, 

        new GameFields(){ ID= "Game4", Text= "Cricket" }, 

        new GameFields(){ ID= "Game5", Text= "Football" }, 

        new GameFields(){ ID= "Game6", Text= "Golf" }, 

        new GameFields(){ ID= "Game7", Text= "Hockey" }, 

        new GameFields(){ ID= "Game8", Text= "Rugby"}, 

        new GameFields(){ ID= "Game9", Text= "Snooker" }, 

        new GameFields(){ ID= "Game10",Text= "Tennis"}, 

    }; 

} 

 

Screenshot: 

 

 

 

We have made sample based on requirement. Please find the sample below. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete-1905625352 

 

Kindly check with the above sample. Please get back to us if you need further assistance. 

 

Regards, 

 

Vignesh Srinivasan.