JavaScript autocomplete without external library

javascript autocomplete library
javascript autocomplete textbox
autocomplete json javascript
javascript autocomplete textbox from array
inline autocomplete javascript
awesomplete example
bootstrap autocomplete
js autocomplete package

Is there a javascript autocomplete library that does not depend on any other libraries?

I am not using jQuery or the likes as I am making a mobile app that I need to keep extra light.

Here is a basic JavaScript example, which could be modified into an autocomplete control:

var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

function matchPeople(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
  return people.filter(function(person) {
    if (person.match(reg)) {
      return person;
    }
  });
}

function changeInput(val) {
  var autoCompleteResult = matchPeople(val);
  document.getElementById("result").innerHTML = autoCompleteResult;
}
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>

How to create a form input autocomplete without a library or framework, For today's article, I was going to show you how to recreate Angular's autocomplete demo with vanilla JS as part of my series on coding  Blazing fast and lightweight autocomplete widget without dependencies. Email Autocomplete. A jQuery plugin that suggests and autocompletes the domain in email fields. Places. Algolia Places provides a fast, distributed and easy way to use an address search autocomplete JavaScript library on your website. Accessible Autocomplete. This is a

For anyone looking at this in 2017 onwards who needs a simple solution, you can use HTML5's built-in <datalist> tag instead of relying on JavaScript.

Example:

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>

<input type="text" list="languages">

Note that this won't work in Safari (as of April 2017).

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

Awesomplete: Ultra lightweight, highly customizable, simple , Demo (no JS, minimal options) No extra JS needed for basic usage! For the autocomplete, you just need an <input> text field (might work on To use objects without label or value properties, e.g. name and id instead, you can do this: Turns out, native HTML5 provides elements we can use to get autocomplete without a library or framework… or any JavaScript at all. The magic that makes this all happen is the datalist element. Let’s say you wanted to create an input where you name your favorite state. First, create your input.

The core of an autocomplete script will be the ajax call to the dictionary of terms.

I assume your mobile application already includes an ajax function, so maybe you're better off just writing your autocomplete from scratch? Basically all you need in an input tag, a keyup event handler that triggers the ajax call, and a div to collect the response.

[Update] Based on the comments, some references from John Resig's blog:

http://ejohn.org/blog/revised-javascript-dictionary-search/

http://ejohn.org/blog/jquery-livesearch/

autoComplete.js, Simple autocomplete pure vanilla Javascript library. query = document.​querySelector("#autoComplete").value; // Fetch External Data Source const source = await Serve results without rendering list through resultsList.render API; Custom  Here is what the basic example looks like:. Global Options. When initializing an autocomplete, there are a number of global options you can configure. autoselect – If true, the first rendered suggestion in the dropdown will automatically have the cursor class, and pressing <ENTER> will select it.

ES2016 feature: Array.prototype.includes without external library.

function autoComplete(Arr, Input) {
    return Arr.filter(e =>e.toLowerCase().includes(Input.toLowerCase()));
}

Codepen Demo

20 Best Autocomplete & Autosuggest Javascript Libraries – Bashooka, So here are 20 Autocomplete & Autosuggest Javascript Libraries that will Blazing fast and lightweight autocomplete widget without dependencies. Complete project is written in plain js, with no external dependencies, and  An auto complete form. We could have a huge list and show only those relevant to the user. We don't need to load all the results into the HTML, we can simply load the ones we need as the user types. This is the technique used in many websites where there are a lot of options to choose from. e-commerce, marketplaces, classifieds, social media, e

I was researching this the other night, and my solution was originally like the ES6 solution in here, like this:

return this.data.filter((option) => {
    return option.first_name
        .toString()
        .toLowerCase()
        .indexOf(this.searchTerms.toLowerCase()) >= 0
})

But the problem with that is it isn't robust enough to handle filtering nested data. You can see it is filtering this.data which has a data structure like:

[
    { first_name: 'Bob', },
    { first_name: 'Sally', },
]

You can see it filters based on this.searchTerms after lowercasing both the search term and option.first_name, but it is too rigid to search for option.user.first_name. My original attempt was to pass in the field to filter by, such as:

this.field = 'user.first_name';

But this involves savage, custom JavaScript to handle something like this.field.split('.') and dynamically generating the filter function.

Instead, I remembered an old library I've used before called fuse.js, and it is working well because it not only handles that case of arbitrary nesting on what I just called this.field but also handles fuzzy matching based on defined thresholds.

Check out here: https://fusejs.io/

[edit note]: I realize this question is looking for no-external-library, but I want to keep this post here as it provides adjacent value. It is not intended to be "the" solution.

Here is how I'm currently using it:

import Fuse from 'fuse.js';

const options = {
    threshold: 0.3,
    minMatchCharLength: 2,
    keys: [this.field],
};

const fuse = new Fuse(this.data, options);

this.filteredData = fuse.search(this.searchTerms);

You will have to read the Fuse docs to understand that better, but fundamentally, you can see that a new Fuse() object is created using the data to filter and the options.

The keys: [this.field] part is important because that's where you pass in the keys to search by, and you can pass in an array of them. For example, you could filter this.data by keys: ['user.first_name', 'user.friends.first_name'].

I am using this currently in Vue JS, so I have that above logic inside an instance watch function, so every time this.searchTerms changes, that logic runs and updates this.filteredData which is placed into my dropdown list in my autocomplete component.

Also I'm sorry I just realized this question specifically says without an external library, but I'll post this anyway because I find this question every time I make an ES6 autocomplete in Vue JS or React JS. I think it is very valuable to have strict or loose fuzzy matching and to support arbitrarily nested data. Based on Webpack bundle analyzer, fuse.js is 4.1kb gzipped, so it is quite small given that it can support "all" client-side filtering needs.

If you are limited in your ability to use external libraries, consider my first example piece of code. It works if your data structure is static, and you can easily change option.first_name to something like option[this.field] if you wish to variablize the searched field (ie: if your objects are always flat).

You could variablize the list to search as well. Try something like this:

const radicalFilter = ({ collection, field, searchTerms }) => {
    return collection.filter((option) => {
        return option[field]
            .toString()
            .toLowerCase()
            .indexOf(searchTerms.toLowerCase()) >= 0
    })
}

radicalFilter({
    collection: [{ first_name: 'Bob' }, { first_name: 'Sally' }],
    field: 'first_name',
    searchTerms: 'bob',
})

Based on my experiences over the past couple years, the above sample is very performant. I've used it to filter 10,000 records in a react-table component, and it didn't break a sweat. It doesn't create any extra intermediate data structures. It is simply just Array.prototype.filter() which takes your array and returns a new array with matched items.

algolia/autocomplete.js: Fast and full-featured autocomplete library, Autocomplete.js. This JavaScript library adds a fast and fully-featured auto-​completion menu to your search box displaying results "as you type". It can easily be  I do not want to write .d.ts files for every single external javascript file I want to use, is that seriously what Typescript wants me to do? No. The simplest / quickest solution is simply to tell it that there is some variable Tree out there. This is as simple as: declare var Tree:any; // Magic var myTree = Tree.tree({})

autocomplete.js | Remote AutoComplete Lite, Fast and Stable, autocomplete.js is a fast and lightweight autocomplete library, without any dependencies. Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Building a JavaScript Autocomplete Widget with Awesomplete , To use the Awesomplete library we need two files: awesomplete.css and awesomplete.js . You can get these using bower: bower install https://  Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because <datalist> still doesn’t cut it. Basic usage Customize Extend Events API Advanced Examples Download! Demo (no JS, minimal options) Note that by default you need to type at least 2 characters for the

Guide to EasyAutocomplete, JS file --> <script src="path/to/jquery.easy-autocomplete.min.js"></script> <!-- CSS file You can download library from the jQuery website. Best practice is to use Connect EasyAutocomplete plugin to the external data source. In this example  Demos Searching in local data. This plugin was designed mainly with AJAX requests in mind, but it may be used with local data, as well. Connecting the autocompletion suggester to an array of strings can be done in the source function like so:

Comments
  • webreference.com/programming/javascript/gr/column5/index.html
  • @PeterAjtai this link is broken.
  • For the benefit of future readers, I have implemented a library just for this (github.com/uohzxela/fuzzy-autocomplete). It does depend on jQuery though. However a vanilla JS version is in the works.
  • Hey there! Really like your answer! 2 questions. 1 - Is it important, or necessary to cache the compiled expression? I'm asking because of this article: dustindiaz.com/autocomplete-fuzzy-matching 2- How can I limit it to return x amount from the array?
  • replacing .join('\\w*') with .join('\\w*\\s*\\w*') will make it possible to match letters from different words
  • This sadly is an autosuggestion not a autocomplete. You can't choose the suggestion.
  • Here is a codepen loosely related to this code example. It uses jQuery to filter around 500 elements. Performs good. Should perform even better when using vanilla js.
  • I imagine this would be faster than JS since it's a browser API. I haven't done any benchmarks though, which is what I'd recommend doing if you have very large data sets. I've only used this for small lists (200-300 items) that didn't need anything fancy (note that for a more complicated setup you'll want to use JavaScript or a combination of both).
  • I was planning to make the autocomplete work from a local dictionary, or a remote AJAX call, or a mixture of the two (so already used words are added to local dictionary from the remote call) or... to use the existing dictionary on the mobile device. I don't see the data source as the responsibility of the autocomplete script, but a separate issue. For me, the most complicated part of making my own, would be an efficient way to search an array of possible matches. I imagine some kind of b-tree algorithm, but would prefer to use well thought out code for this task rather than make my own.
  • ok, I see. If you use a remote call, the query will be handed over to the data source, not processed in the JavaScript code. If the dictionary is local, then I don't know (and I guess it would depend on your rule: match beginning, match any part of the string?). I've been using several articles from John Resig's blog as reference to do such things, for example ejohn.org/blog/revised-javascript-dictionary-search
  • I have edited my answer to add references. I am using the second one for local filtering.
  • I was reading those links earlier. The first is a jQuery dependent solution, so I skipped over it. The second is very interesting (and the two articles leading up to it) but unfortunately does not quite fit what I need because I must match the start of the word, and not the whole word. I might use it as a starting point for a home baked solution, as he has pretty much done all the benchmarking legwork to figure out what is efficient, and I probably would get away with minimal editing. Thanks for the research.
  • I ended up using the second link as a starting point for my own solution, which worked very efficiently - but is maybe currently lacking in functionality. Thanks a lot!