[feature request] autocomplete in form field

[lovasoa]

Discussed in https://github.com/lovasoa/SQLpage/discussions/220

^{Originally posted by **heejit** February 10, 2024} First SQLPage is very nice many thanks for sharing. How do I allow user to select / auto complete a input box from sql table which contain 10K rows (item_names) user need to input few letter to start search.

[lovasoa]

What I would do is reuse the "tags input" element from the tabler css library that SQLPage embeds:

<div class="mb-3">
  <label class="form-label">Tags input</label>
  <select type="text" class="form-select tomselected ts-hidden-accessible" placeholder="Select tags" id="select-tags" value="" multiple="multiple" tabindex="-1">
    <option value="HTML">HTML</option>
    <option value="JavaScript">JavaScript</option>
    <option value="CSS">CSS</option>
    <option value="jQuery">jQuery</option>
    <option value="Bootstrap">Bootstrap</option>
    <option value="Ruby">Ruby</option>
    <option value="Python">Python</option>
  </select><div class="ts-wrapper form-select multi"><div class="ts-control"><input tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="select-tags-ts-dropdown" id="select-tags-ts-control" placeholder="Select tags" type="select-multiple"></div></div>
</div>

https://tabler.io/preview

You can follow the instructions to create your own custom component, or contribute directly to the form component

The way I would do it is adding a new row level parameter called options_source that the user would set to the name of a sql file to call to get the list of options.

Then the user could do

fom.sql

select 'form' as component;
select 'My choice' as name, 'my_items.sql' as options_source;

my_items.sql

SELECT 'json' AS component, (
    SELECT JSON_GROUP_ARRAY(item_name) FROM items WHERE item_name LIKE $search || '%'
) AS contents;

what do you think ?

[heejit]

We can use input-box with list tag

<input id="id1" list="a-datalist">

<datalist id="a-datalist">
<option value="item_1"> </option>
</datalist>

[lovasoa]

This is also a possibility, but the rendering is a little bit less pretty:

[JPapir]

I may be wrong, but this seems very similar to this question (with the difference that here you need only one item)

If you reuse the tom-select library as I did, I think that this feature is more or less already implemented with a lot of additional options (how many letters before the search starts, how many outputs, etc)

[lovasoa]

Support for autocomplete has been added and will be released in 0.20.3 :tada:

You will be able to use a select input form with a dropdown property and create a beautiful input with autocomplete.

https://sql.ophir.dev/documentation.sql?component=form#component