12 ms·

Autocomplete – A JavaScript library for building autocomplete experiences

225 points by auraham 3y ago

Technotroll 3y ago
Perhaps this is tangential, but I'm always amazed with input forms have a "Go" or "Send" button when it's supposed to do some on-the-fly or local computation or treatment of the input. So, why wait? Why force the user to perform yet another action? Programming allows for the process to start from the first character or number being typed into the form. The fact that developers still put a "Send" button on most forms these days kind of amazes me. That makes me wonder. Am I wrong? When is it useful to have a "Go" or "Send" button, and demand that extra action from the user?
- lelanthran 3y ago
  I don't follow. Are you saying that forms which are not submitted shouldn't have a separate submit button? If so, I might agree, up to a point. However any form that has to be submitted to a server absolutely MUST have a submit button, for the case when user input is complete and the user is still reviewing all the fields.
- suction 3y ago
  [dead]
- mft_ 3y ago
  Because... that's how the user signals that the form is complete and correct, and ready to go, or to be submit -ted? Maybe I'm not understanding your frustration...?
  - Technotroll 3y ago
    In a lot of applications, there is no need to signal readiness. You can simply start processing the input at once, and display it continuously, from the first character or number that is entered. This is true for most applications that run client side. We're talking everything from small calculators to text processing. In most cases the "OK" button can be completely omitted. It's of course a different matter if you need to digest it remotely.
- throwaway290 3y ago
  As a user, I don't know if it only does local processing, and I prefer to click the button explicitly. Eg. if I accidentally paste a password and it starts loading stuff I would be alarmed.
padolsey 3y ago
Looks really good - pleasant UX and seems nicely semantic/accessible! Also seems to allow slight mispellings which I really like. I tried building my own autocomplete thing for ablf.io and it was *tough*. The dataset was massive, over 400k canonical titles. And I wanted to split out different variants/localizations of the titles/authors so it's much more than that really. I ended up using the 'trie-search' npm package as that was really the only way get decent performance. I also did some hueristic levenstein distance stuff to order the results most optimally for the user. I found it helpful to add variants to the trie with vowels and common conjuctions like 'The' and 'A' removed – since people tend to forget those when searching for book titles (then when searching across the trie I can attempt different variants). I guess the main learnings are: it's important to pay attention to the type of data you've got and how users will try to access it; don't assume they know titles of things nor the spelling. Use trie structures! Also: with large datasets it's beneficial to do upfront data prepartion to build variants. RAM is pretty cheap. Thinking... I imagine "AI semantic autocomplete" will be happening pretty soon which is exciting.
- dham 3y ago
  We use Algolia, and we have an index of that is 10 million records, 1 that is 5 million and 1 that is 4 million. Performance and reliability have never been an issue. In fact, it's the only thing in our stack that we never have issues with. (knock on wood)
colesantiago 3y ago
Is there an open source and self hosted version of this that isn't tightly coupled to Algolia's server and doesn't send keystrokes to Algolia?
- naiv 3y ago
  https://github.com/typesense/typesense-autocomplete-demo https://github.com/typesense/typesense-autocomplete-demo Might give you some ideas
- trinovantes 3y ago
  I use [1] for searching a fully static site [1] https://github.com/farzher/fuzzysort https://github.com/farzher/fuzzysort
- gbrits 3y ago
  Isn't the Angolia backend just one of the possible 'sources' as they put it? You can easily add your own backend as a source I imagine
  - tawy11111111 3y ago
    That is 100% correct. This library does NOT send any keystrokes to Algolia, unless you configure it to use its services. This library is NOT coupled to Algolia's server, unless you explicitly configure it to. And 1 nice thing is: You can add multiple sources to it, meaning you can search at the same time in various local and/or remote sources/servers and integrate all results into 1 result list with rich layout possibilities.
    - naiv 3y ago
      While this is true , some plugins like the query suggestions have a very 'Algolian' format and dont work ootb without writing an additional wrapper around the response as the format differs from the output of the main plugin
- joemcelroy 3y ago
  https://github.com/searchkit/searchkit https://github.com/searchkit/searchkit is an instantsearch adapter for elasticsearch / opensearch
onion2k 3y ago
If you don't need it to be clever and dynamic, and you're not too bothered about styling, then HTML's <input> tag has a typeahead option using <datalist>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...
- bunga-bunga 3y ago
  The cool part of datalist is that you can listen to input events on the field, query the server and create your options in the datalist.
  - kitd 3y ago
    Yes, I've done this with Htmx. Send the input content to the server and respond with the new <datalist> html that gets automatically swapped in. Really simple engineering.
    - maleldil 3y ago
      Does this mean that every time the user types something, they have to wait a roundtrip from the server for completion? Wouldn't this make this useless for average-to-fast typers? Htmx sounds like a lovely idea, but doesn't it introduce a ton of latency compared to client-side operations?
      - kitd 3y ago
        Well, they "wait" for a fraction of a second maybe. And you put it behind a typing delay so it responds only when the user is ready. Also, many autocompletes do a round trip anyway. The htmx version just returns the html already rendered, rather than, say, JSON that requires further processing and injecting. Here are a couple of Go templates from a sample project that show it: {{define "autoc_data" -}} {{- range . -}} <option>{{.}}</option> {{- end -}} {{- end}} {{define "autoc" -}} <input name="{{.Id}}" id="{{.Id}}" type="text" list="{{.Id}}_data" hx-get="/autoc/{{.Id}}/search" hx-trigger="keyup delay:300ms" hx-target="#{{.Id}}_data"> <datalist id="{{.Id}}_data"> {{- template "autoc_data" -}} </datalist> {{- end}} In response to `/autoc/<id>/search`, the server just responds with a list of strings matching the user's input, formatted with the `autoc_data` template. Htmx injects that into the `<datalist>` directly.
deleted 3y ago
[deleted]
vladstudio 3y ago
I feel I must mention that there exists a completely different approach to solving this problem, with HTMX or other "hypermedia" (let's keep all state on server) tools: https://htmx.org/examples/active-search/ https://htmx.org/examples/active-search/
- IggleSniggle 3y ago
  I appreciate where this comment is coming from, and I love efforts to simplify and remove over-engineering, but htmx doesn’t really keep all state on the server, since once the data is displayed, you now have another holder of state (HTML). As soon as I started reading the docs on hx-sync and started imagining scenarios where that sort of functionality has been needed, I started thinking “man once the state gets this complex I’d really rather manage it in a proper programming language instead.” I think it’s often reasonable to consider the DOM the “database” of the frontend, but it can also be nice to have an intermediary representation to create the appropriate transition. Inversion of control, you might say.
jabo 3y ago
You can also use this library with Typesense, which is an open source alternative to Algolia: https://github.com/typesense/typesense-autocomplete-demo https://github.com/typesense/typesense-autocomplete-demo Disclaimer: I work on Typesense.
- lol768 3y ago
  It's quite easy to plug into any results provider, in fact. I built a proof of concept using Lunr (dataset too small for anything heavier-weight).
superchris 3y ago
Yet another UI open source project that should be web component (custom HTML element) but isn't.
Exuma 3y ago
Very nice, its cool to finally have something like this w/o algolia backend. too bad i just built 2 of these myself and it was agonizing
egometry 3y ago
Autocomplete: The Only Reason We Know What A Trie Is(tm)!
auraham 3y ago
Do you know what approach is better for autocomplete search: fuzzy search or tf-idf? Recently I read this post [0] about indexing Wikipedia using tf-idf. However, I've seen that fuzzy search is often used for autocomplete [1]. [0] https://bart.degoe.de/building-a-full-text-search-engine-150-lines-of-code/ https://bart.degoe.de/building-a-full-text-search-engine-150... [1] https://github.com/farzher/fuzzysort https://github.com/farzher/fuzzysort
- airblade 3y ago
  It probably depends on whether you are searching a body of natural language text (use tf-idf) or a list of things (use fuzzy search).
gerardnico 3y ago
Nice library. I also like very much to use the floating ui headless component Example for an autocomplete/combo box https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App.tsx https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App...
mg 3y ago
I like small libraries which are just a single file. That's why I am maintaining a fork of the original typeahead library from bootstrap. It is less than 400 lines of javascript: https://github.com/no-gravity/0g-typeahead https://github.com/no-gravity/0g-typeahead It is humming away nicely, doing hundreds of thousands of typeaheads each day across my websites. I always think I should finally do the work and get rid of the jquery dependency. But so far, I just did not got around doing it.
- 1337shadow 3y ago
  Here's one in 228 lines with an additional 190 to support hidden <selects> https://yourlabs.io/oss/autocomplete-light/-/blob/master/autocomplete-light.js https://yourlabs.io/oss/autocomplete-light/-/blob/master/aut... It's a trivial web component in vanilla js, it's tested in python: https://yourlabs.io/oss/autocomplete-light/-/blob/master/test_alight.py https://yourlabs.io/oss/autocomplete-light/-/blob/master/tes...
- lordofmoria 3y ago
  I just went through looking for, and failing to find, a good typeahead library. I could not find one I liked. Typeahead is probably the most sophisticated UI element, and the most demanding in terms of what users expect. Two pro tips: 1. Apparently this is also called “combo box” - Tailwind has one: https://tailwindui.com/components/application-ui/forms/comboboxes https://tailwindui.com/components/application-ui/forms/combo... I eventually rolled my own using tailwind’s scaffold: it ended up being about 300 lines of JS to handle things like keyboard actions, pressing enter, focus/non-focus, denounce search. But the benefit? It does exactly what I want.
- 2Gkashmiri 3y ago
  Nice. Your repo doesn't have a license.
  - mg 3y ago
    Good point. The license for the actual library is on top of the file: https://github.com/no-gravity/0g-typeahead/blob/master/0g-typeahead.js https://github.com/no-gravity/0g-typeahead/blob/master/0g-ty... The project is pretty much that one file. Twitter put the license there, so it did never cross my mind to remove it and put it into an extra file. But it might make sense to put the whole repo (which is just the typeahead.js file plus a little demo) under that license to avoid confusion.

225 points by auraham 3y ago

Perhaps this is tangential, but I'm always amazed with input forms have a "Go" or "Send" button when it's supposed to do some on-the-fly or local computation or treatment of the input. So, why wait? Why force the user to perform yet another action? Programming allows for the process to start from the first character or number being typed into the form. The fact that developers still put a "Send" button on most forms these days kind of amazes me. That makes me wonder. Am I wrong? When is it useful to have a "Go" or "Send" button, and demand that extra action from the user?

lelanthran 3y ago
I don't follow. Are you saying that forms which are not submitted shouldn't have a separate submit button? If so, I might agree, up to a point. However any form that has to be submitted to a server absolutely MUST have a submit button, for the case when user input is complete and the user is still reviewing all the fields.
suction 3y ago
[dead]
mft_ 3y ago
Because... that's how the user signals that the form is complete and correct, and ready to go, or to be submit -ted? Maybe I'm not understanding your frustration...?
- Technotroll 3y ago
  In a lot of applications, there is no need to signal readiness. You can simply start processing the input at once, and display it continuously, from the first character or number that is entered. This is true for most applications that run client side. We're talking everything from small calculators to text processing. In most cases the "OK" button can be completely omitted. It's of course a different matter if you need to digest it remotely.
throwaway290 3y ago
As a user, I don't know if it only does local processing, and I prefer to click the button explicitly. Eg. if I accidentally paste a password and it starts loading stuff I would be alarmed.

padolsey 3y ago

Looks really good - pleasant UX and seems nicely semantic/accessible! Also seems to allow slight mispellings which I really like. I tried building my own autocomplete thing for ablf.io and it was *tough*. The dataset was massive, over 400k canonical titles. And I wanted to split out different variants/localizations of the titles/authors so it's much more than that really. I ended up using the 'trie-search' npm package as that was really the only way get decent performance. I also did some hueristic levenstein distance stuff to order the results most optimally for the user. I found it helpful to add variants to the trie with vowels and common conjuctions like 'The' and 'A' removed – since people tend to forget those when searching for book titles (then when searching across the trie I can attempt different variants). I guess the main learnings are: it's important to pay attention to the type of data you've got and how users will try to access it; don't assume they know titles of things nor the spelling. Use trie structures! Also: with large datasets it's beneficial to do upfront data prepartion to build variants. RAM is pretty cheap. Thinking... I imagine "AI semantic autocomplete" will be happening pretty soon which is exciting.

dham 3y ago
We use Algolia, and we have an index of that is 10 million records, 1 that is 5 million and 1 that is 4 million. Performance and reliability have never been an issue. In fact, it's the only thing in our stack that we never have issues with. (knock on wood)

colesantiago 3y ago

Is there an open source and self hosted version of this that isn't tightly coupled to Algolia's server and doesn't send keystrokes to Algolia?

naiv 3y ago
https://github.com/typesense/typesense-autocomplete-demo https://github.com/typesense/typesense-autocomplete-demo Might give you some ideas
trinovantes 3y ago
I use [1] for searching a fully static site [1] https://github.com/farzher/fuzzysort https://github.com/farzher/fuzzysort
gbrits 3y ago
Isn't the Angolia backend just one of the possible 'sources' as they put it? You can easily add your own backend as a source I imagine
- tawy11111111 3y ago
  That is 100% correct. This library does NOT send any keystrokes to Algolia, unless you configure it to use its services. This library is NOT coupled to Algolia's server, unless you explicitly configure it to. And 1 nice thing is: You can add multiple sources to it, meaning you can search at the same time in various local and/or remote sources/servers and integrate all results into 1 result list with rich layout possibilities.
  - naiv 3y ago
    While this is true , some plugins like the query suggestions have a very 'Algolian' format and dont work ootb without writing an additional wrapper around the response as the format differs from the output of the main plugin
joemcelroy 3y ago
https://github.com/searchkit/searchkit https://github.com/searchkit/searchkit is an instantsearch adapter for elasticsearch / opensearch

onion2k 3y ago

If you don't need it to be clever and dynamic, and you're not too bothered about styling, then HTML's <input> tag has a typeahead option using <datalist>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

bunga-bunga 3y ago
The cool part of datalist is that you can listen to input events on the field, query the server and create your options in the datalist.
- kitd 3y ago
  Yes, I've done this with Htmx. Send the input content to the server and respond with the new <datalist> html that gets automatically swapped in. Really simple engineering.
  - maleldil 3y ago
    Does this mean that every time the user types something, they have to wait a roundtrip from the server for completion? Wouldn't this make this useless for average-to-fast typers? Htmx sounds like a lovely idea, but doesn't it introduce a ton of latency compared to client-side operations?
    - kitd 3y ago
      Well, they "wait" for a fraction of a second maybe. And you put it behind a typing delay so it responds only when the user is ready. Also, many autocompletes do a round trip anyway. The htmx version just returns the html already rendered, rather than, say, JSON that requires further processing and injecting. Here are a couple of Go templates from a sample project that show it: {{define "autoc_data" -}} {{- range . -}} <option>{{.}}</option> {{- end -}} {{- end}} {{define "autoc" -}} <input name="{{.Id}}" id="{{.Id}}" type="text" list="{{.Id}}_data" hx-get="/autoc/{{.Id}}/search" hx-trigger="keyup delay:300ms" hx-target="#{{.Id}}_data"> <datalist id="{{.Id}}_data"> {{- template "autoc_data" -}} </datalist> {{- end}} In response to `/autoc/<id>/search`, the server just responds with a list of strings matching the user's input, formatted with the `autoc_data` template. Htmx injects that into the `<datalist>` directly.

deleted 3y ago

[deleted]

vladstudio 3y ago

I feel I must mention that there exists a completely different approach to solving this problem, with HTMX or other "hypermedia" (let's keep all state on server) tools: https://htmx.org/examples/active-search/ https://htmx.org/examples/active-search/

IggleSniggle 3y ago
I appreciate where this comment is coming from, and I love efforts to simplify and remove over-engineering, but htmx doesn’t really keep all state on the server, since once the data is displayed, you now have another holder of state (HTML). As soon as I started reading the docs on hx-sync and started imagining scenarios where that sort of functionality has been needed, I started thinking “man once the state gets this complex I’d really rather manage it in a proper programming language instead.” I think it’s often reasonable to consider the DOM the “database” of the frontend, but it can also be nice to have an intermediary representation to create the appropriate transition. Inversion of control, you might say.

jabo 3y ago

You can also use this library with Typesense, which is an open source alternative to Algolia: https://github.com/typesense/typesense-autocomplete-demo https://github.com/typesense/typesense-autocomplete-demo Disclaimer: I work on Typesense.

lol768 3y ago
It's quite easy to plug into any results provider, in fact. I built a proof of concept using Lunr (dataset too small for anything heavier-weight).

superchris 3y ago

Yet another UI open source project that should be web component (custom HTML element) but isn't.

Exuma 3y ago

Very nice, its cool to finally have something like this w/o algolia backend. too bad i just built 2 of these myself and it was agonizing

egometry 3y ago

Autocomplete: The Only Reason We Know What A Trie Is(tm)!

auraham 3y ago

Do you know what approach is better for autocomplete search: fuzzy search or tf-idf? Recently I read this post [0] about indexing Wikipedia using tf-idf. However, I've seen that fuzzy search is often used for autocomplete [1]. [0] https://bart.degoe.de/building-a-full-text-search-engine-150-lines-of-code/ https://bart.degoe.de/building-a-full-text-search-engine-150... [1] https://github.com/farzher/fuzzysort https://github.com/farzher/fuzzysort

airblade 3y ago
It probably depends on whether you are searching a body of natural language text (use tf-idf) or a list of things (use fuzzy search).

gerardnico 3y ago

Nice library. I also like very much to use the floating ui headless component Example for an autocomplete/combo box https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App.tsx https://codesandbox.io/s/fragrant-water-bsuirj?file=/src/App...

mg 3y ago

I like small libraries which are just a single file. That's why I am maintaining a fork of the original typeahead library from bootstrap. It is less than 400 lines of javascript: https://github.com/no-gravity/0g-typeahead https://github.com/no-gravity/0g-typeahead It is humming away nicely, doing hundreds of thousands of typeaheads each day across my websites. I always think I should finally do the work and get rid of the jquery dependency. But so far, I just did not got around doing it.

1337shadow 3y ago
Here's one in 228 lines with an additional 190 to support hidden <selects> https://yourlabs.io/oss/autocomplete-light/-/blob/master/autocomplete-light.js https://yourlabs.io/oss/autocomplete-light/-/blob/master/aut... It's a trivial web component in vanilla js, it's tested in python: https://yourlabs.io/oss/autocomplete-light/-/blob/master/test_alight.py https://yourlabs.io/oss/autocomplete-light/-/blob/master/tes...
lordofmoria 3y ago
I just went through looking for, and failing to find, a good typeahead library. I could not find one I liked. Typeahead is probably the most sophisticated UI element, and the most demanding in terms of what users expect. Two pro tips: 1. Apparently this is also called “combo box” - Tailwind has one: https://tailwindui.com/components/application-ui/forms/comboboxes https://tailwindui.com/components/application-ui/forms/combo... I eventually rolled my own using tailwind’s scaffold: it ended up being about 300 lines of JS to handle things like keyboard actions, pressing enter, focus/non-focus, denounce search. But the benefit? It does exactly what I want.
2Gkashmiri 3y ago
Nice. Your repo doesn't have a license.
- mg 3y ago
  Good point. The license for the actual library is on top of the file: https://github.com/no-gravity/0g-typeahead/blob/master/0g-typeahead.js https://github.com/no-gravity/0g-typeahead/blob/master/0g-ty... The project is pretty much that one file. Twitter put the license there, so it did never cross my mind to remove it and put it into an extra file. But it might make sense to put the whole repo (which is just the typeahead.js file plus a little demo) under that license to avoid confusion.