How to do auto complete from database table

[heejit]

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]

Hello! There is no such component in SQLPage yet... Would you be interested in contributing one? I can help !

[heejit]

Yes if you can guide me I can try.

[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]

I am beginner in web programming.

I don't understand the Sqlpage inner working.

I have little experience with Go and Htmx

I have small app written in Go and htmx.org.

What I did is when user press enter key on a input-box a javascript function send ajax request to
backend and in response get a dialog which contain a Html Table and 1st column of each row is a button which call other javascript function to handle the user selection and closing of dialog.

What I understand as per your suggestion is on every input change sqlpage will call my_item.sql to get a new item list and update the select component right ?

[lovasoa]

Yes, exactly ! I'm turning this discussion into a feature request, so that we can keep track of it :)

[lovasoa]

#221

[lovasoa]

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

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