json - html form autocomplete from database in 2021

Question

There are many articles regarding how to autocomplete some input and related form widgets. The goal is to autocomplete user input with data from database (via json api) but send only the id(s) from database back to the server. There are two cases of usage:

1. simple id-name (or id-value) pairs
2. plus some "related" info (like - a dummy example, don't judge - select also the country when selecting a city)

Since ages, jquery autocomplete is used, it's working, but since jquery has become for too many people the "black sheep" I am looking for other possible solutions.

Existing solutions:

1. jquery-autocomplete + input.text (value) + input.hidden (id): it works, can be made bootstrap-friendly with some css, you can disable text send to server by not giving names to those input.text(s) so only required data is passed to the server, "related" data can be set through input/select ids; everything ok
2. jquery-autocomplete + input.text (value) with some data-id attribute; same as above, no need to add those hidden inputs, but you must "create" the post request (from javascript); sending json and using FormData with some javascript can make you life easier (at least for not-so-complicated forms); plus, you can (if you're lucky) access form inputs only by name (in case of multiple dynamically generated forms on the same page, to avoid id collision)
3. bootstrap-select2 is a nice candidate, unfortunately I don't like the idea of putting the input to the dropdown; plus, I'm not sure if you can use "related" info to populate other fields

You got the idea, I'm looking for something like 'editable/searchable select with dynamically fetch data'. Besides those solutions listed above, there is something else these days ?

question from:https://stackoverflow.com/questions/66061879/html-form-autocomplete-from-database-in-2021

Answer 1

there are a lot of options available to "enhance" user selection with autocomplete forms (just because it looks more advanced, does not make it necessarily easier for users to use! Keep it in mind, it depends on your use-case, test it with end users if you can)

First, most people are not aware of the HTML5 native <datalist> element, which would cover your first case here without the need for any javascript. It comes of course with limitations but is by far the cheapest option to consider:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Also a decent coverage among brothers, to be confirmed for your needs:

https://caniuse.com/datalist

If you are looking for more advanced controls, there are indeed plenty available but it depends on your stack, for instance if you use a frontend framework such as React or Vue and/or a UI library such as Material Design, Twitter Bootstrap, Bulma, Bumbag, (insert whichever UI library name here...):

• https://ant.design/components/auto-complete/
• https://material-ui.com/components/autocomplete/
• https://buefy.org/documentation/autocomplete
• https://bumbag.style/form/autosuggest/
• https://mdbootstrap.com/docs/standard/forms/autocomplete/
• https://semantic-ui.com/modules/search.html
• https://quasar.dev/vue-components/select#Filtering-and-autocomplete
• https://koolamusic.github.io/chakra-ui-autocomplete/
• https://selectize.github.io/selectize.js/ (that one is jQuery based)

You may find those handy (they have their own customization options and limitations), with the caveat being the need to adopt their UI library and/or the framework itself.

Also just a final small note:

since jquery has become for too many people the "black sheep" I am looking for other possible solutions

Just because more and more people think this way, does not mean it necessarily apply to your own project. I no longer use jQuery myself those days because I usually run with with frontend frameworks, but for backend developers, I think it can still provide some benefits :) If it works fine for you, there is nothing specifically wrong with it IMO.