10 Javascript Autocomplete Libraries For Website
Tags: javascript, html, css, beginners
Published: 2021-12-27 23:55:40

In this article, I will introduce you some autocomplete js libraries for web design and development.
#Awesomplete 
Awesomplete is an open source library with a size of only about 2Kb (after compression) that create autocomplete for websites without any additional libraries. Before using, you need to download 2 files, awesomplete.css and awesomplete.js. Then you just need to call the awesamplete class and add data-list="ID of your list" to the input HTML. What I like is that its extensibility is also very easy through setting properties for HTML element such as "data-minchars: after": how many user-entered words will display suggestions, "data-maxitems": part number elements that the suggestion list can contain... In addition, it also has dropdown suggestions, get suggestions through Ajax... in the demo page!
![Awesomplete](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592533062/thu-vien-autocomplete-javascript/Awesomplete_pz0lko.png)
[Link Awesomplete](https://projects.verou.me/awesomplete/)

#Horsey 
Horsey is an open source library that helps you create autocomplete features quickly and easily to set up your website. You can use it for many different types of websites with many useful features such as loading suggestions via Ajax, using keyword suggestions, limiting the number of suggestions for users, using dropdown to display suggestions... It runs on most popular browsers today and for IE, from IE7+ and up.
![Horsey](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592534117/thu-vien-autocomplete-javascript/Horsey_fewvx1.png)
[Link Horsey](https://bevacqua.github.io/horsey/)

#autoComplete.js 
autoComplete.js is a library library is built javascript. With high variable customization features, no additional libraries, compact size, simplicity, ease of use. It has several other features such as search mode, highlight from key search, how many results will be display ...
![autoComplete.js](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592534808/thu-vien-autocomplete-javascript/autoCompletejs_k1edba.png)
[Link autoComplete.js](https://tarekraafat.github.io/autoComplete.js/#/)

#typeahead.js
typeahead.js is a javascript autocomplete library inspired by the search function on Twitter. It has two main libraries, Bloodhound, which handles the computation of the outputs to the user, and the UI component that renders recommendations and interacts with the DOM. In this introduction, I will only focus on the interface, but if you want to learn more, you can see its Github page typeahead.js. This library has many useful features such as displaying suggestions in groups, adding default suggestions, easily tweaking the interface for suggestions...
![typeahead.js](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592535755/thu-vien-autocomplete-javascript/typeaheadjs_uxtn4x.png)
[Link typeahead.js](https://twitter.github.io/typeahead.js/)

#Algolia Places
Algolia Places is a Javascript library that helps us to quickly and easily create feature screens that display suggested topics to users when searching for a certain location. It will automatically give suggestions about address, city, country... every time you type in the box input. What I like most is that we can set up suggestions for information points through the real-time map that the library provides to help users easily shape and have a direct view. However, it also has a limitation that if you want to use it, you need to register to receive an API to access the library's data information. And with the free version we get 100,000 requests/month. If you want to use more, the price will be 0.4$ for 1000 requests.
![Algolia Places](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592536914/thu-vien-autocomplete-javascript/Algolia_Places_g3d6nl.png)
[Link Algolia Places](https://community.algolia.com/places/)

#Accessible Autocomplete
Accessible Autocomplete is a Javascript library that generates an autocomplete. Main feature is support on many different devices, browsers and easy to set up for website. You just need the file accessible-autocomplete.min.js and then set up the feature for the website through the declaration of 3 basic properties, element: object in HTML page, id: id of lable and source: suggested resource. Also it is also has some more features like limit number of suggestions, add placeholder for input box, auto select suggestion...
![Accessible Autocomplete](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592538904/thu-vien-autocomplete-javascript/Accessible_Autocomplete_ig3wcz.png)
[Link Accessible Autocomplete](https://github.com/alphagov/accessible-autocomplete)

#AutoJS
AutoJS is an open source library built with javascript that makes it possible to give suggestions during user input through a standard dictionary developed based on linguistic research and methods. Currently, as I see it, it is only used for English, with a standard size of about 17kb (containing more than 10,000 words). In addition, it also has two other versions, micro (contains about 1500 words) and maximum (contains about 32,000 words). You just need to download the file and initialize it with javascript code to be able to use it!
![AutoJS](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592548192/thu-vien-autocomplete-javascript/AutoJS_lwjtl6.png)
[Link AutoJS](https://atmb4u.github.io/AutoJS/)

#email-autocomplete
email-autocomplete is an open source library built with jquery that helps you build email domain suggestions for users. For example, when you enter hello@gm, the program will automatically suggest hello@gmail.com. It's convenient, right. You can also easily set the font color style for the suggested word in the input box via the .eac-sugg class. In addition, if you want to see popular email domains, you can refer to its github page.
![email-autocomplete](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592548725/thu-vien-autocomplete-javascript/email-autocomplete_iz9ku7.png)
[Link email-autocomplete](https://github.com/yongzhenlow/email-autocomplete)

#Ajax AutoComplete for jQuery
Ajax AutoComplete for jQuery is an open source library built with jquery that makes it easy to create autocomplete for your website. It only uses the additional library, Jquery, with the compressed size only about 2.7kb. It also has a number of features that can be tailored to your site such as Ajax suggestions, height limits for suggestions, location of suggestions, number of results, suggestions want to show...
![Ajax AutoComplete for jQuery](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592549564/thu-vien-autocomplete-javascript/Ajax_AutoComplete_for_jQuery_azaasg.png)
[Link Ajax AutoComplete for jQuery](https://github.com/devbridge/jQuery-Autocomplete)

#Flexselect
Flexselect is an open source library built with jquery that helps you display suggestions to users, when they enter certain information into the input box, the suggestions will be displayed via dropdown. For the normal way of selecting through the select tag, it has a limitation that when the user wants to select again, they have to search for information from the beginning in the list. This will be very inconvenient as well as take a lot of time for customers, so this library appears to help you solve the above problem. To make it easier to understand and know how to set up the website, you can see its demo page.
![Flexselect](https://res.cloudinary.com/dn4nxz7f0/image/upload/v1592551496/thu-vien-autocomplete-javascript/Flexselect_ueodk6.png)
[Link Flexselect](https://rmm5t.github.io/jquery-flexselect/)

Summary:
I hope the article will provide you with useful autocomplete libraries for web development. If you have any questions just send an email I will respond as soon as possible. Please continue to support the site so that I can write more good articles. Have a nice day!

If you want to read more article please go to https://us.niemvuilaptrinh.com/.

<a href="https://www.buymeacoffee.com/nhat" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>