View on DevOps

Autocomple

The Autocomplete component adds world-class search to your application.

How it works

An autocomplete control in a web form can greatly assist in finding your address by providing suggestions as you type, based on previously entered addresses or data from a database. This saves time and effort by reducing the need to manually enter your entire address, while also ensuring accuracy by preventing spelling errors or typos. As you type in the autocomplete field, a dropdown list of suggestions will appear, allowing you to easily select the correct address. This feature is especially useful for people who frequently move or those who have difficulty with typing or spelling.

Single context lookups

Here is example on how to search for a towns.

<lsui-autocomplete 
    placeholder="Town"
    contexts='["town"]'>
</ls-search-bar-component>

A example on how to create a address form is available in our example section.

AutoComplete

The AutoComplete search option provides suggestions whilst the user is entering their desired address. This is similar to that of Google where the user starts to type into a single line search bar and the system uses an auto-complete drop down to display possible matches to the data captured. The values entered refines the suggestions returned to be closer to the desired address, i.e. Street number, Street name and Suburb allows the AutoComplete Web Control to return closer results. This will avoid returning irrelevant records to the users search. The rows returned will reflect the first 10 results which correspond with the relevant input search criteria. The Autocomplete Search component configures to search either properties or addresses.

Here is example on how to search for a address or property.

<lsui-autocomplete 
    placeholder="Search for a address or property" 
    contexts='["address", "property"]'
    isExtended="true">
</ls-search-bar-component>

A example on how use autocomplete is available in our example section.

Properties and Attributes

TODO

Styling

TODO

Attributes

Name Description Type
placeholder a short hint that describes the expected value. string
contexts Contexts to filter on (i.e. suburb, property, town, etc). string
apiKey A valid Lightstone developer portal API key. string