Awesomplete: 2KB autocomplete with zero dependencies

awesompleteSorry for the lack of posts for the past 7 (!) months, I’ve been super busy working on my book, which up to a certain point, I couldn’t even imagine finishing, but I’m finally there! I’ve basically tried to cram all the CSS wisdom I’ve accumulated over the years in it 😛 (which is partly why it took so long, I kept remembering more things that just *had* to be in it. Its page count on the O’Reilly website had to be updated 3 times, from 250 to 300 to 350 and it looks like the final is gonna be closer to 400 pages) and it’s gonna be super awesome (preorder here!) 😀 . I have been posting a few CSS tricks now and then on my twitter account, but haven’t found any time to write a proper blog post.

Anyhow, despite being super busy with MIT (which btw is amazing, challenging in a good way, and full of fantastic people. So glad to be here!) and the book, I recently needed an autocomplete widget for something. Surprisingly, I don’t think I ever had needed to choose one in the past. I’ve worked with apps that had it, but in those cases it was already there.

At first, I didn’t fret. Finally, a chance to use the HTML5 <datalist>, so exciting! However, the more I played with it, the more my excitement was dying a slow death, taking my open web standards dreams and hopes along with it. Not only it’s incredibly inconsistent across browsers (e.g. Chrome matches only from the start, Firefox anywhere!), it’s also not hackable or customizable in any way. Not even if I got my hands dirty and used proprietary CSS, I still couldn’t do anything as simple as changing how the matching happens, styling the dropdown or highlighting the matching text!

So, with a heavy heart, I decided to use a script. However, when I looked into it, everything seemed super bloated for my needs and anything with half decent usability required jQuery, which results in even more bloat.

So, I did what every crazy person with a severe case of NIH Syndrome would: I wrote one. It was super fun, and I don’t regret it, although now I’m even more pressed for time to meet my real deadlines. I wrote it primarily for myself, so even if nobody else uses it, ho hum, it was more fun than alternative ways to take a break. However, it’s my duty to put it on Github, in case someone else wants it and in case the community wants to take it into its loving, caring hands and pull request the hell out of it.

To be honest, I think it’s both pretty and pretty useful and even though it won’t suit complex needs out of the box, it’s pretty hackable/extensible. I even wrote quite a bit of documentation at some point this week when I was too sleepy to work and not sufficiently sleepy to sleep — because apparently that’s what was missing from my life: even more technical writing.

I saved the best for last: It’s so lightweight you might end up chasing it around if there’s a lot of wind when you download it. It’s currently a little under 1.5KB minified & gzipped (the website says 2KB because it will probably grow with commits and I don’t want to have to remember to update it all the time), with zero dependencies! 😀

And it’s even been verified to work in IE9 (sorta), IE10+, Chrome, Firefox, Safari 5+, Mobile Safari!

’Nuff said. Get it now!

PS: If you’re about to leave a comment on how it’s not called “autocomplete”, but “typeahead”, please go choke on a bucket of cocks instead. 😛

  • Thank you and congrats for this solution 🙂

  • Manolis Kamilakis

    thnx and wtf, LOL

    • Haha, I couldn’t quite parse what kind of reply “wtf, LOL” was, but I’m glad you like it!

      • Manolis Kamilakis

        the “wtf, LOL” part was for the ending PS line 😀

  • greystate

    Love your stuff, Lea 🙂

    (And I didn’t know what it was called, but I knew I had *that* too; NIH Syndrome 🙂

  • Guest

    Nice one! But please change RoR to Ruby in ‘Programming languages’ results ;]

    • Haha, I wanted something with spaces 🙂

    • I know the feel bro. Sometimes I can’t sleep when I see something wrong on the internet 😀

  • David van Wert

    Wow. 1.5? Nice. Can’t wait to play with it.

  • Cory

    Nice! Thanks for creating this! The popup in this typeahead looks great too 🙂
    *Shows myself out and promptly chokes self on a bucket of cocks*

    • Haha, that comment was referring to people who would comment just to point out that it’s called “typeahead”, i.e, the “well actually” people the blog post I linked to describes. Not people who just prefer that term!

  • There’s a typo in the class name in:
    Add class=”awsomplete” for it to be automatically processed

    I’ll try this out next time I need an auto-complete/typeahead solution!

  • xem

    Awesome! It’s a pleasure to have news about your book, and discover your new project! I developed a 1.2kb vanilla JS autocompleter with typeahead, keyboard control, Ajax requests & response caching for my job during the last few months, and I agree, it’s a fun – yet challenging – thing to do! Strangely, the hardest part was to handle keyboard arrow keys properly on browsers like Chrome, who mix, for example, the keycodes of “up arrow” and “&” during keypress events. (http://asquare.net/javascript/tests/KeyCode.html). Anyway, your lib provides a lovely style and a great API. It’s inspiring, and we’ll contribute with pleasure. Cheers

  • Mads Hoel

    I actually thought about this same issue yesterday. And with my basic experience of JavaScript started making my own. I might still complete mine just for fun and learning experience. Good inspiration and thanks for creating this!

  • Jonathan Burne

    So elegant and simple! And who can we pressure to get your book out sooner?

  • Pingback: Article Roundup for 02.20.2015 - Tvenge Design()

  • Pingback: Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №148 (16 — 22 февраля 2015) - itfm.pro()

  • Pingback: Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №148 (16 — 22 февраля 2015) | Zit@i0()

  • Pingback: Javascript DIGEST: FEB 2015 #3 | {coding}Refs()

  • dz

    Hi Lea, very nice work! and very usefull. What kind of compatibility can garantuee for IE9? what’s the fallback for IE8 (useless question maybe).

  • verified

    Verified

  • Hi Lea, Thanks for the awesome plugin, It’s a dropdown smasher..

  • adrinho cruz

    Hey Lea, i will preorder your book :). Do you use SASS and how much do you use it? I don’t get behind the hype with CSS-Preprocessors. When i plan and structure my css right, i don’t need a preprocessor and besides that, why do we have to nest and “complicate” css as a “style language”? I don’t get it. Would you recommend learning SASS or LESS? Thanks in advance and have a nice day :)!

    • In my book I’ve used pure CSS almost everywhere, but I’ve also used SASS when the CSS code was too WET and couldn’t be made more DRY.
      Nesting *is* important again to avoid repetition (and without nesting, you either end up with repetition in your HTML markup, or in your CSS code), as well as for structuring your CSS file to find things easily (but that latter goal can be achieved with just formatting)

  • Tim Davis

    Wicked-awesome. Thank you!

  • Richard Shotbolt

    Awesomplete is great but I can’t get it to pass its ‘value’ attribute on a form ‘get’ via submit button. I think this is because it doesn’t have a ‘name’ attribute. Anyone have a fix or workaround for this? Thanks!

  • Richard Shotbolt

    Love Awesomplete but how can I get it to add its ‘value’ attribute to request.querystring after a form ‘get’ event triggered by a submit button? I think the problem is that Awesomplete doesn’t support a ‘name’ attribute. What’s the fix? (and sorry if this appears twice – new to Disqus!)

    • Awesomplete just fills in the input field, so it should behave like anything else in it. There is no such thing as Awesomplete supporting a name attribute or not. If your form is coded correctly, it should work.

      • Richard Shotbolt

        Thanks Lea, I’ve found my problem; my form is pretty complex and the tags were straddling an open element! Strange that the Awesomplete was the only control that misbehaved, but good to find the bug ad fix it!

  • Richard Shotbolt

    Hi Lea, for one instance of Awesomplete on my form I need to style the inner ul list with height=60 and overflow-y=scroll. How can I do this in CSS without deriving a new class or changing it globally? (forgive me if this is trivial!)

  • Hi Lea, Love the code – one question: How do I stop the input field from automatically shortening itself? I can’t seem to overwrite with CSS

    • max-width doesn’t work?

      • Hey Lea, thanks for getting back to me. The max-width is set to 100% – unchanged from the original copy. It briefly appears at full width, then snaps back to a shorter width. (The same width as all the inputs appear on the various examples). I’m using Chrome on Win 8 and 10.

        • Sorry, I meant min-width. If you don’t want it to go shorter than a given length, you need min-width, not max-width…

        • Hi Lea,

          I clicked that you meant ‘min-width’ as soon as I hit return. Yup. That works just fine. Thanks for the code, it’s spot on 🙂

  • Richard Shotbolt

    Hi Lea, or anyone – I must have a fundamental misunderstanding of the Javascript API. I have multiple existing instances of Awesomplete. I would like to change the list properties on-the-fly via $ or getElementById but it seems the only property I can access that way is value. How can I change the list property – or any other property -of an existing instance? Thanks!

    • Richard Shotbolt

      It’s a one-liner to add this feature to awesomplete.js:

      this.input.awesomplete = this;
      instance.all.push(this);

      instance.prototype = {

      Each input now has an awesomplete property to access 🙂

      $(“myawesomplete”).awesomplete.list = “cat,dog,horse”;

  • Longinos Ruvalcaba

    I thought you were an extremely intelligent man, it is so confusing

  • nigayo

    Great!
    sweetsearch.js : Another zero dependencies 🙂
    https://git.io/vaNY1
    That works well on most mobile devices.

  • Pingback: Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №148 (16 — 22 февраля 2015) - bitruble.ru()

  • Lee

    Lea,This is awesome. It works great. Now I put the feature around a search input on my masthead of pages.
    A problem is found that the popup extends the height of the masthead. Wondering if you have any suggestion how to show the popup with tag without having to impact the container size (masthead).
    Lee

  • HarlemGent

    Hello, and thanks! I’m trying to do something which seems like it should be very straightforward, but just can’t figure it out. I’m pretty new to JavaScript, so I may be missing something obvious. I would like to act on the newly selected value as soon as it is chosen (e.g. with a click or Enter), without requiring a button press. But I can’t figure out which event to use. “oninput” fires whenever anything is typed in the input field, but not when the input field value is changed by picking an option from the list of suggestions. The “awesomplete-select” event seems like it should work, but it doesn’t. I suspect that’s because of event.preventDefault(), but if so I don’t know how to override that and make the event fire. Thanks for any assistance anyone can offer!

  • Say, how can I stop your .js or CSS from altering the style of my input box which I have wired up your js to use?

    I see in the .js, the code wrapping a div with awesomplete class around the input. Even when I do not load the awesome stylesheet, the input box shrinks because of the .js.

    What is going on?

  • Marine Be

    Hi and thanks for making this! I’m trying to use it in rails 5 and I’m wondering if there’s a way to use the data from a model instead of typing a list myself?