Form Input : How to use autocomplete ?

[heejit]

select
    'form'                        as component,
    'Reset'                       as reset;
select 
    TRUE             as searchable,
    'Item Name'    as label,
    'item'         as name,
    'select'       as type,
    'Search item...' as placeholder,
    'select * from search_item($item)' as options;

search_item function returns following data ->    
[{"label": "item-1", "value": 405544}, 
{"label": "item-2", "value": 1101735}, 
{"label": "item-3", "value": 1101736}]

error in sqlpage console ->
[2025-01-26T14:00:29.531Z ERROR sqlpage::render] SQL error: Error rendering "form each block" line 79, col 25: parse_json: expected value at line 1 column 1
    
    Caused by:
        parse_json: expected value at line 1 column 1
[2025-01-26T14:00:29.532Z INFO  actix_web::middleware::logger] 127.0.0.1 "GET /item_search.sql HTTP/1.1" 200 2499 "http://localhost:9000/menu.sql" "Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0" 0.002739

[lovasoa]

You have to set options to a json array containing all the possible options. The filtering will be done on the client side. You can look at the examples on the form component documentation.

[heejit]

there are many items I just want to show only the filtered one and then user can select from the filtered list
so I dont have to load all the item at once.

select input has to update every time when user type

is that possible ?

[lovasoa]

no, you have to load all items. how many do you have? what are you building?

[heejit]

i have more than 10,000 items

I am building internal tool which show current inventory of selected item

[heejit]

I have more data like that(customer, supplier) which need to filter first then user can select from the filtered list.

[heejit]

and all these data get updated all the time so we need updated data always

[lovasoa]

I ran a small test with a 10000 item select field with autocomplete.

On the (resource limited) free version of https://editor.datapage.app , this gives me this

Screencast.From.2025-01-26.22-13-21.mp4

The experience is not completely smooth, and the page takes ~4 seconds to load, but then the search is fast. I wouldn't completely disregard this option if you want clean results.

If you need the full dynamic autocomplete experience, you'll need to write a few lines of javascript, i'll give you an example.

[lovasoa]

Here is the full dynamic solution using javascript

## big_select.js

async function load(query, callback) {
  const response = await fetch(`/big_search.sql?q=${encodeURIComponent(query)}`);
  callback(await response.json());
}

new TomSelect("#big_select", {
  valueField: "id",
  labelField: "value",
  searchField: "value",
  load,
});

## index.sql

select 'shell' as component,
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.popular.min.js' as javascript,
    'big_select.js' as javascript;

select 'form' as component;
SELECT 'select' as type, 'big_select' as id;

big_search.sql

select 'json' as component;

select id, my_text_column as value
from my_big_table
where my_text_column like $q || '%';

[heejit]

thanks it is working fine.

can you add this as new type of form input if possible.