Concorde UI component — Input-autocomplete. The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue. Doc ID: core/components/ui/form/input-autocomplete/input-autocomplete. Keywords: Concorde, supersoniks, core/components/ui/form/input-autocomplete/input-autocomplete, input-autocomplete, Input-autocomplete, UI component, form, sonic-input-autocomplete, web component, items, docs-queue-geo-demo, src/docs/example/docs-queue-demos.ts, searchParam, name, value. URL: https://concorde.supersoniks.org/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html.

Input-autocomplete

The input-autocomplete component brings input and queue together in order to create a suggest behavior. This is why this component is partially configured as a form input and as a queue.

Please note that only basic text input params and methods are implemented at this time. You should also be sure to understand the behavior of a queue in order to take full advantage of the input-autocomplete component.

Here are some of the features of the input-autocomplete component:

Doc examples below use HTML binding on suggestion rows. The Lit equivalent uses an items callback with the row object (see docs-queue-geo-demo in src/docs/example/docs-queue-demos.ts). Embedding without Lit: HTML integration.

It provides a suggest behavior, where the user can type a few letters and the component will suggest possible matches.
It can be used with a variety of data providers, such as an API.
It is fully customizable, so you can change the look and feel of the component to match your needs.

If you are looking for a component to provide a suggest behavior, the input-autocomplete component is a good option.

Simple Example

In this example, the input will use its name as the search parameter when calling the service responsible for autocompletion.

The template is used to render the list items of results. The list items are responsible for making a selection.

This time, we added buttons with the same name as the input while keeping the same data provider. The result is that when you select an item, the input takes the value of the selected item, completing the classic suggest behavior.

<sonic-input-autocomplete 
    class="w-64"
    label="A french city name" 
    formDataProvider="autoComplete-example-base" 
    name="nom" 
    propertyName="bloop"
    placeholder="Paris, Lyon, Tours, ..." 
    serviceurl="/docs-mock-api/geo" 
    dataproviderexpression="communes?limit=5&boost=population"
    >
      <template>
        <sonic-menu-item debug radio name="nom" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>

Value different from search parameter

In this example, the search parameter is separated from the name of the input. This means that the input will use the name "nom" as the search parameter, but the form data provider will be filled with the data named "siren" from the selected list item.

To do this, we need to use the searchParam attribute on the input element. This attribute specifies the name of the search parameter that will be used.

We also need to use the name and value attribute on the list items. This attribute specifies the value of the data provider that will be used for the selected list item.

By using these attributes, we can separate the search parameter from the name of the input and still fill the form data provider with the data from the selected list item.

<sonic-input-autocomplete 
    class="w-64"
    label="A french city name" 
    formDataProvider="autoComplete-example" 
    name="siren" 
    value="212703771" 
    placeholder="Paris, Lyon, Tours, ..." 
    serviceurl="/docs-mock-api/geo" 
    dataproviderexpression="communes?limit=5&boost=population"
    searchParameter="nom" 
    >
      <template>
        <sonic-menu-item debug  radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>

Select autocomplete / value different from search parameter

This example is the same as the previous one, except that the select attribute is used. This attribute changes the look and feel of the component slightly.

Now the text is less free because, you must select either something from the list given by the service, or nothing else.

The following code shows how to use the select attribute in an autocomplete input:

<sonic-input-autocomplete 
    select
    class="w-64"
    label="A french city name" 
    formDataProvider="autoComplete-example2" 
    name="siren" 
    value="212703771" 
    placeholder="Paris, Lyon, Tours, ..." 
    serviceurl="/docs-mock-api/geo" 
    dataproviderexpression="communes?limit=5&boost=population"
    searchParameter="nom" 
    >
      <template>
        <sonic-menu-item debug radio name="siren" data-bind ::inner-html="$nom" ::value="$siren"></sonic-menu-item>

At the moment you can enable keyboard up/down by adding an attribut "data-keyboard-nav" on the component and its listItems

<sonic-input-autocomplete 
    class="w-64"
    label="A french city name" 
    formDataProvider="autoComplete-example-keyboard" 
    name="nom" 
    data-keyboard-nav="nav-autocomplete" 
    placeholder="Paris, Lyon, Tours, ..." 
    serviceurl="/docs-mock-api/geo" 
    dataproviderexpression="communes?limit=60&boost=population"
    >
    <template>
        <sonic-menu-item debug radio name="nom" data-keyboard-nav="nav-autocomplete" data-bind ::inner-html="$nom" ::value="$nom"></sonic-menu-item>

Input-autocomplete

Simple Example

Value different from search parameter

Select autocomplete / value different from search parameter

keyboard navigation