Overview of IntegralUI AutoComplete

IntegralUI AutoComplete is a native web component for Angular, React and Vue that represents a text box with a dropdown list where you can choose among suggested options. By entering text into the text box, you can filter the option list. In this article, you will find general information about the auto complete component, including its properties, events and methods that you can use.

In this example, the list contains city names. You can quickly search for a specific city, by typing its name. Once the list is filtered, using the up/down keys, you can select a city from the list.

How to Use IntegralUI AutoComplete in Angular, React and Vue

To use the AutoComplete component you need to do the following:

• In app template place the button component using the iui-autocomplete tag name
• Set values for different properties available
• Handle the component events in your code

• JavaScript
• Angular
• React
• Vue

<iui-autocomplete [appRef]="applicationRef" [list]="sampleList"  [placeHolder]="'Search text ...'"></iui-autocomplete>
                                    

The component consists of an input text box and a dropdown list. You can load options in the list from a custom data source (locally or remotely) and setting the list property.

If an option is not selected, you can display a text that will act as a placeholder. In this example, the 'Search text ... ' phrase will appear by default.

The data source that contains the option list main contains different names for the item object fields. You can still use this data, but you need at first to map the field names with the ones used by the AutoComplete component. For this purpose use the dataFields property, this holds an object that will map your field names with the ones used by the auto complete component.

• JavaScript
• Angular
• React
• Vue

import { HttpClient, HttpHeaders } from '@angular/common/http';

. . .

@ViewChild('application', {read: ViewContainerRef, static: false}) applicationRef: ViewContainerRef;

public dataFields: any = {
    text: 'name'
}

public sampleList: Array = [];

constructor(private http: HttpClient){}   

ngAfterViewInit(){
    // Load data into the ListBox from a JSON file
    this.loadFromJSON();
}

private loadFromJSON(){
    let self = this;

    // Use HTTP service to get data from the specified JSON file
    self.http.get("./assets/cities.json").subscribe((data: Array) => self.sampleList = data);
}
                                    

[
    { "name": "London", "country": "United Kingdom" },
    { "name": "Paris", "country": "France" },
    { "name": "Macau", "country": "China" },
    { "name": "New York", "country": "USA" },

    // . . . 
    // 
    // The full data set is available at https://stackblitz.com/edit/integralui-autocomplete-overview
    //
    
]
                                    

List of Available Properties, Events and Methods in IntegralUI AutoComplete

You can use the following properties to change the appearance and behavior of the AutoComplete component:

• appRef - holds a reference to application view
• controlStyle - Specifies an object that contains all style settings for the component
• data - Specifies an object that holds data related to the component
• dataFields - Specifies an object that map the fields names of list items from your data source to the ones used by the component
• dropDownWidth - Specifies the width of the dropdown list in pixels
• enabled - Determines whether the component is enabled or disabled
• list - Gets or sets a list of items that is assigned to the component
• maxVisibleItems - Specifies the maximum number of items displayed in the dropdown list
• name - Uniquely identifies the component
• placeHolder - A string that appears in text box as place holder
• size - specifies the component width and height
• state - Specifies the component state: disabled, hovered, etc.
• text - Specifies the input text value

Using the above properties, you can customize the AutoComplete component in a way best suited for your application.

Supported Events

Here is a list of available events:

• enabledChanged - occurs when component is enabled or disabled
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected
• valueChanged - occurs when a input text changes or an option is selected from a dropdown list

In this example, once an option is selected from the dropdown list, the valueChanged event is fired. By handling this event in your code, you can add a specific action based on the selected option.

• JavaScript
• Angular
• React
• Vue

onValueChanged(e: any){
    console.log("Text value changes to: ", e.value);
}
                                    

<iui-autocomplete [appRef]="applicationRef" [list]="sampleList"  [placeHolder]="'Search text ...'" (valueChanged)="onValueChanged($event)"></iui-autocomplete>
                                    

How to Customize the AutoComplete Appearance

If you want to apply a different style to the component, you can use the controlStyle property. This property accepts an object where you need to specify the names of your CSS classes, for state that you want to change: disabled, focused, hovered, normal and selected. Here is a list of class names that are used by default:

autoCompleteStyle = {
    general: {
        disabled: 'iui-autocomplete-disabled',
        focused: 'iui-autocomplete-focused',
        normal: 'iui-autocomplete',
        hovered: 'iui-autocomplete-hovered',
        selected: 'iui-autocomplete-selected'
    }
}
                    

Conclusion

IntegralUI AutoComplete is a web component that you can use in Angular, React and Vue. This component consists of a text box and a dropdown list where you can choose among suggested options. You can populate the option list using custom data source, either locally or remotely. You can quickly navigate among options by entering text, this will filter the list on demand.

Using different properties and events and by providing your own CSS classes, you can customize the auto complete appearance and behavior.

The AutoComplete component is part of IntegralUI Web.