Hacker Read top | best | new | newcomments | leaders | about | bookmarklet login

If you want not use Angular or another other framework, a fully functional autocomplete may be made with 10 lines of JavaScript. See demo: http://www.scriptol.com/javascript/autocomplete.php Adding a scrolling list of choices would requires two or three more lines.


sort by: page size:

Datalist is really awesome. Autocomplete with no CSS or JS? sounds good to me.

autocomplete for js will be great too.

> You don't need JS for basic autocomplete in 2023, you can use "datalist" in HTML:

This does not seem to load data dynamically, it seems to be a way to show data from a predefined list?


The big feature that I want in an autocomplete is the ability to click on the text area and get a list of possible completions. I hacked that onto bootstraps angular autocomplete widget, but it's a bit of a mess.

You can do all of that with very lightweight JavaScript though. 10+ years ago I did autocomplete using a few carefully crafted lines of code and the page still renders just fine.

The problem is JS frameworks make development easier but have high real world costs that are often ignored.


What about autocomplete for html and css? Always been looking for something like this :)

If you want a mobile-first, vanilla JS autocomplete implementation: https://github.com/jonathanong/autocomplete

You don't need JS for basic autocomplete in 2023, you can use "datalist" in HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

A lot of basic high value interactions are more directly encoded in HTML today than a lot of developers expect to need JS for. Some other tags to pay attention to: summary/details, progress, meter, input type="color|date|time|datetime|range".

It's an interesting relearning project, sometimes, how much the high level interactivity bits of HTML have changed since, for instance, the jQuery era.


Agreed. Tools like htmx [1] are good for this. Combined with the "list" attr on <input>s makes for very simple autocomplete implementations.

[1] https://htmx.org/examples/active-search/


Most "basic" autocomplete isn't all that dynamic and you can prepopulate on the server side reasonably well.

Sure, you still need JS to fetch a dynamic changing list, but you can also just update datalist options elements with JS rather than implement a full separate UX for autocomplete today. You are limited in the ability to CSS style datalist options so a lot of developers are still going to feel pressure in 2023 from "pixel perfect" UX designers to continue to reimplement that wheel, but the version of the JS that just updates a datalist after a fetch is likely much simpler than building a full "autocomplete control".


It's the same as the form autocomplete you already have, only now it can be initiated from js.

How much JavaScript is needed to accept my text input and provide auto complete options? Pretty wild we need to worry about browser compatibility to do this

The closest we have now is datalist[1], which acts as a data source that you can attach to a text input to give it autocomplete. Unfortunately, it isn't nearly as fully-featured as it could be, possibly because no one uses it so there's no incentive to make it better (although Chrome's implementation has gotten markedly better over the past two years or so, mostly by fixing blatant bugs).

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...


This is interesting, I am curious if it's possible to add more than 10 results and how it would look.

Also if it makes sense to use something like this for code autocomplete - I would prefer I could just scroll to find everything.

I think though in case of code parsing through the code and add things to the dictionary may be more expensive than looking through it.


I would have mentioned the Jquery-UI built in autocomplete function...

http://jqueryui.com/autocomplete/


Please add autocomplete, it would make it so much easier to work with; something like the Chrome console.

If you're going to do this, why not just make it an input with autocomplete rather than an input + click on list item?

The datalist element, which can be used for browser native autocomplete of input options https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

autocomplete
next

Legal | privacy