Simple autocomplete pure vanilla Javascript library.

Overview

autoComplete.js โœจ

License GitHub package.json version npm GitHub top language [Zero Dependencies]() [Size]() Maintained npm Open Source Love



autoComplete.js Design



Simple autocomplete pure vanilla Javascript library. ๐Ÿš€ Live Demo v8.3

autoComplete.js is a simple pure vanilla Javascript library that's progressively designed for speed, high versatility and seamless integration with a wide range of projects & systems, made for users and developers in mind.

Features

  • Pure Vanilla Javascript
  • Zero Dependencies
  • Simple & Easy to use
  • Extremely Lightweight
  • Blazing Fast
  • Versatile
  • Hackable & highly customizable

autoComplete.js Code Example

Get Started

Clone:

  • Clone autoComplete.js to your local machine
git clone https://github.com/TarekRaafat/autoComplete.js.git

Installation:

  • jsDelivr CDN

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css">

JS

<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/js/autoComplete.min.js"></script>
  • npm install (Node Package Manager)
npm i @tarekraafat/autocomplete.js
  • Yarn install (Javascript Package Manager)
yarn add @tarekraafat/autocomplete.js

Documentation:

Third-Party Plugins:


Support

For general questions about autoComplete.js, tweet at @TarekRaafat.

For technical questions, you should post a question on Stack Overflow and tag it with autoComplete.js.


Author

Tarek Raafat

Distributed under the Apache 2.0 license. See Apache 2.0 for more information.


License

Apache 2.0 ยฉ Tarek Raafat

Comments
  • How can I re assign new data source to a auto complete

    How can I re assign new data source to a auto complete

    I'm making some progress but still ask myself a lot of questions: I would like to use autocomplete in a sort of manufacturers/products choice (like that but it's a small private project...)

    1. First I thought I could use two autocomplete but I don't think, after what I understood that is possible.

    2. Second I thought to modify the data source of the only one autocomplete .

    Desired Process description:

    • The user type in some letters of a manufacturer the list display differnt choices
    • The user select one
    • The user click on next : the program change the auto complete data source, key and feedback to allow the user to type a product
    • The autocomplete is fed with products and display a selection
    • The user select one and eventually get a compet manufacturer/product choice.

    Would you have any advice.

    enhancement question 
    opened by albu77 17
  • data.src is called 2 times on keypress

    data.src is called 2 times on keypress

    Hi, i found an issue when querying in the input box. When i do a keypress, my api is called 2 times which is present in data.src async function. this makes the user experience slow since the search results are not rendered unless i get response from the second call. Please let me know how i can fix this. Thanks

    bug 
    opened by srinivas025 14
  • AutoComplete stops working (silently) after hard refresh or cache clear (webkit)

    AutoComplete stops working (silently) after hard refresh or cache clear (webkit)

    System information

    • Safari 14
    • Chrome 87
    • MacOS 10.15.7
    • Site is deployed on Netlify

    Error messages

    The only error message in console indicates that livereload.js, requested by autoComplete.js, failed to load. This message is visible when autoComplete works and when it does not:

    https://5fd294e3bc4a350007fa0e28--eviction-lab.netlify.app:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED
    (anonymous) @ autoComplete.js:2
    (anonymous) @ autoComplete.js:2
    

    Description

    Load the page in Safari or Chrome on MacOS (iOS devices do not seem to reproduce it). Scroll down to the first chart, and use the search input above the chart. On first load, autoComplete works, suggesting county names as you type. If I do a hard refresh (CMD + R) or clear the cache, it autoComplete no longer works. There are no error messages.

    I cannot reproduce this locally, only when deployed.

    Workaround

    The only thing that will resolve the issue is if I completely shut down the browser, start it up again, and reload the page.

    Expected behavior

    autoComplete should work after hard refresh or clear cache.

    Screenshots

    Before clear cache: Screen Shot 2020-12-10 at 3 59 58 PM

    After hard refresh (autoComplete still initialized, and clearly has data, but no errors): Screen Shot 2020-12-10 at 4 00 54 PM

    After restart Chrome (works again): Screen Shot 2020-12-10 at 4 04 19 PM

    Then clear cache (stops working): Screen Shot 2020-12-10 at 4 04 46 PM Screen Shot 2020-12-10 at 4 04 58 PM

    Attempted solutions

    bug 
    opened by lougroshek 13
  • AutoFocus

    AutoFocus

    Hi!

    It will be great if there is an "autofocus" option, like JqueryUI autocomplete has, please see:

    https://api.jqueryui.com/autocomplete/#option-autoFocus

    Thanks a lot!

    enhancement 
    opened by dictosistemas 13
  • Can't update to the new version - toLowerCase()

    Can't update to the new version - toLowerCase()

    Hi,

    I'm looking to apply the new release to my differents projects but an error occured when searching, I mean by taping in the search bar, I get : image

    So, I've show the "record" var, and it's the full object of one product in the json file. It should be a string?

    I really want to update this version to the v4 or the v5

    help wanted question 
    opened by ghost 11
  • Mozilla compatibility error

    Mozilla compatibility error

    Hi there,

    I'm using autoComplete on multiple website, I just saw than it's not working on Mozilla Firefox (65.0.1) It gave me this error : TypeError: t.filter is not a function - autoComplete.min.js:1:2962

    On Chrome everythings is ok. Any idea ? Thanks for this awesome js librairie !

    bug 
    opened by ghost 11
  • feature request, multi key for search in object

    feature request, multi key for search in object

    Hi,

    Thanks for that awesome plugin !

    I would like to know what do you think about adding multi keys when we use an array of Objects.

    For example:

    const data = [
    	{ label: 'test', code: '0123456789' },
    	{ label: 'test2', code: '9876543210' },
    ]
    

    and key would be: [ 'label', 'code' ]

    I'm sorry if it's not clear but do not hesitate to ask me more details

    enhancement 
    opened by Johann-S 11
  • Highlight (goTo) the first item on each keystroke

    Highlight (goTo) the first item on each keystroke

    How can I highlight (goTo) to the first item in the results on each keystroke?

    I tried with this, but this will work only on the first keystroke, when result box is opened.

    document.querySelector("#autoselect").addEventListener("open", function (event) {
        autoSelect.goTo(0);
    });    
    

    Is there an event which will fire on earch refresh of the results?

    enhancement 
    opened by mileusna 10
  • add polyfill functions for IE11: CustomEvent, Element.prototype.closest

    add polyfill functions for IE11: CustomEvent, Element.prototype.closest

    Relates to this issue: https://github.com/TarekRaafat/autoComplete.js/issues/43

    Todo list:

    • [x] Use CustomEventWrapper instead of default window.CustomEvent
    • [x] Init Element.prototype.Closest if not exists
    enhancement 
    opened by g-viet 10
  • Element added in resultsList.container is removed on second input

    Element added in resultsList.container is removed on second input

    • [ ] System Information

      • [ ] Firefox nightly 26. april
      • [ ] Linux
    • [ ] Describe the bug

    Here's the code for one of my autocompletes (work in progress)

    		new autoComplete({
    			data: {
    				src: async () => fetchBedriftsInfo(v("bedrift")),
    				key: ["navn", "organisasjonsnummer"],
    				cache: false,
    				results: list => {
    					const q = v("bedrift").toLowerCase()
    					return list.sort((first, second) => {
    						let fs = diceCoefficient(
    							q,
    							first.value.navn.toLowerCase()
    						)
    						let ss = diceCoefficient(
    							q,
    							second.value.navn.toLowerCase()
    						)
    						return ss > fs
    					})
    				}
    			},
    			query: {
    				manipulate: query => {
    					let nr = /^\d+$/.test(query.replace(/\s/g, ""))
    					if (nr === true) {
    						return query.replace(/\s/g, "")
    					}
    					return query
    				}
    			},
    			selector: "#bedrift",
    			threshold: 3,
    			debounce: 300,
    			resultItem: {
    				content: (data, element) => {
    					if (
    						data.value.forretningsadresse instanceof Object &&
    						typeof data.value.forretningsadresse.poststed ===
    							"string"
    					) {
    						element.innerHTML = `<span>${data.value.navn}</span><span class="text-muted">${data.value.forretningsadresse.poststed}</span>`
    					} else if (
    						data.value.postadresse instanceof Object &&
    						typeof data.value.postadresse.poststed === "string"
    					) {
    						element.innerHTML = `<span>${data.value.navn}</span><span class="text-muted">${data.value.postadresse.poststed}</span>`
    					} else {
    						element.innerHTML = `<span>${data.value.navn}</span>`
    					}
    				}
    			},
    			resultsList: {
    				container: (element) => {
    					const result = document.createElement("p")
    					result.setAttribute("class", "no_result")
    					result.setAttribute("tabindex", "1")
    					result.innerHTML = `Skriv inn hele organisasjonsnummeret, uten mellomrom.`
    					element.appendChild(result)
    				},
    				maxResults: 8,
    				idName: "bedrift-liste",
    				noResults: (list, query) => {
    					const result = document.createElement("li")
    					result.setAttribute("class", "no_result")
    					result.setAttribute("tabindex", "1")
    					let nr = /^\d+$/.test(query)
    					if (nr === true) {
    						result.innerHTML = `Skriv inn hele organisasjonsnummeret, uten mellomrom.`
    					} else {
    						result.innerHTML = `Fant ingen resultat for "${query}".`
    					}
    					list.appendChild(result)
    				}
    			},
    			onSelection: feedback => {
    				settBedrift(feedback.selection.value)
    				setTimeout(() => {
    					$("epost").focus()
    				}, 100)
    			}
    		})
    

    In resultsList.container I add a p element at the top of the list that I want to use to give helpful information to the user. Here's a screenshot: dropdown (the text in the p is currently wrong, also the element is not styled properly - I just started implementing it, but that's not relevant to the bug)

    • [ ] To Reproduce Steps to reproduce the behavior: <!-- Example below-!>
    1. Add element to the container in resultsList.container
    2. Type something in the input
    3. Wait for autocomplete to open
    4. See the element added in step 1 is there
    5. Type one more character (make the autocomplete refresh itself), and the element is gone
    • [ ] Expected behavior I want the element to be there every time :-)

    I think the "problem" is in your function generateList you do list.innerHTML = ""; if list is non-null.

    Perhaps it would be possible to add an attribute to my element that makes autoComplete.js not nuke it?

    Or maybe you have an alternative solution for me :-) Thank you!

    bug 
    opened by folknor 9
  • Custom selected item and highlighted text classes

    Custom selected item and highlighted text classes

    Allow users better control over how the selected item and highlighted text is displayed by letting them use their own custom classes instead of the ones hard-coded in the source code.

    opened by jerrykan 9
  • Diacritics

    Diacritics

    Hi. I am using diacritical mark support. From the Polish letters "ฤ…, ฤ‡, ฤ™, ล‚, ล„, รณ, ล›, ลบ, ลผ" I have a problem with the character - "ล‚", "ล". It doesn't work when I use "l", "L" interchangeably. Can I fix it somehow?

    bug 
    opened by mtrx84 1
  • List Dont Append even tought finds the result

    List Dont Append even tought finds the result

    Im using this lib, and when searching using the async first takes some time to load since is pending the request finishes, any ideia how to improve this? since when i type bananas, some calls are made but because they are using aync even if the finnal call have results they dont get appended.

    Also in some queries the endpoint returns an array with results, but the input dont show them on the list.

    0: {value: 'Rua Adelina Lessa dos Santos , 46100-970 Brumado\r\n', data: Array(2)} 1: {value: 'Rua Presidente Castelo Branco , 46100-970 Brumado\r\n', data: Array(2)} }

    code im using

    ` var autoCompleteJS = new autoComplete({ selector: "#" + autoCompleteId, placeHolder: "Search for Fruits...", threshold: 4, data: { src: async (query) => { if (query === "") { return; }

                        try {
                            // Fetch Data from external Source
                            const source = await fetch(`endpoint?search=${query}`);
                            // Data should be an array of `Objects` or `Strings`
                            const response = await source.json();
                            console.log(response)
                            return response.data;
                        } catch (error) { console.log(error)
                            return error;
                        }
                    },
                    // Data source 'Object' key to be searched
                    keys: ["value"],
                },
                resultsList: {
                    element: function element(list, data) {
                        if (!data.results.length) {
                            // Create "No Results" message element
                            var message = document.createElement("div");
                            // Add class to the created element
                            message.setAttribute("class", "no_result");
                            // Add message text content
                            message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
                            // Append message element to the results list
                            list.prepend(message);
                        }
                    },
                    noResults: true
                },
                resultItem: {
                    highlight: true
                },
                events: {
                    input: {
                        selection: function selection(event) {
                            var selection = event.detail.selection.value;
                            autoCompleteJS.input.value = selection;
                        }
                    }
                }
            });
    

    `

    Any ideia if its possible to use ajax insted of async method and awaits

    opened by mrelliot69 0
  • Add aria-label to div wrapper

    Add aria-label to div wrapper

    Is your feature request related to a problem? Please describe. We use a 508 scanner (SortSite) and the results from the scan are: ARIA control has no label. It refers to the div autoComplete wrapper.

    <div class="autoComplete_wrapper" role="combobox" aria-owns="lookup-autoComplete" aria-haspopup="true" aria-expanded="false">

    Thoroughly Describe the solution you'd like

    1, Add a default aria-label value to the autoComplete_wrapper. 2, Add a value to the config that can be set to customize the value of aria-label if developer wants to customize the message.

    Something like:

    wrapper: true, wrapperlabel: 'My custom aria label',

    OR:

    wrapper: {
    enabled: true, 
    ariaLabel: "My custom aria label."
    },
    

    Please provide a few use cases for this feature Improves accessibility by giving the screen reader something to announce to the user.

    Please Describe alternatives you've considered For the time being, we have added this code to our script, but because it gets added after the autocomplete loads, the SortSite scanner doesn't seem to be able to pick it up.

    document.querySelector("#autocompleteInput").addEventListener("init", function (event) {
    	var autoCompleteWrapper = document.querySelector(".autoComplete_wrapper");
    	if (autoCompleteWrapper) {
    		autoCompleteWrapper.setAttribute("aria-label", "Location form autocomplete");
    	}
    });
    

    I feel its better to have the value the in the config since autoComplete is building that wrapper completely already.

    enhancement 
    opened by robbiegod 0
  • data.src never fires

    data.src never fires

    I can't get the autocomplete to populate, I know it's something stupid I must be doing. Following the demo code, I'm especially wondering why doesn't this code print 'getting data' You can assume the id is correct, the js/css is loaded and the control looks exactly right, but what does the data.src need to fire?

    console.log('starting autcomplete')
    
    const activityList = new autoComplete({
    	selector: '#activity-input',
    	data: {
    		src: async () => {
    			console.log('getting data')  // this never runs, no code in here ever runs, what am I missing?
    		}
    	}
    })
    
    opened by PandaWood 1
Releases(v10.2.7)
  • v10.2.7(Apr 12, 2022)

  • v10.2.6(Jul 15, 2021)

    v10.2.6 โœจ

    • โž• Added:
      • New How-to Guides example for Dynamic list position based on it's position inside viewport [#158]
    • ๐ŸŽ›๏ธ Updated:
      • Library code with minor cleanup & optimizations resulted in minor size reduction for faster loading time
      • Configuration documentation section
      • Development dependencies
    • ๐Ÿงน Removed:
      • autoComplete.search() API method to be only available per autoComplete.js instance instead of global
    Source code(tar.gz)
    Source code(zip)
  • v10.2.5(Jul 11, 2021)

  • v10.2.4(Jul 7, 2021)

  • v10.2.3(Jul 7, 2021)

  • v10.2.2(Jul 7, 2021)

    v10.2.2 โœจ

    • โž• Added: Security awareness note under the Usage section in the Docs (Thanks ๐Ÿ‘ @needlag) #254
    • ๐Ÿ”ง Fixed: search API method was not returning the result value
    • ๐ŸŽ›๏ธ Updated: Library code with deep cleanup & minor optimizations resulted in around 2.4% size reduction of the minified version and 3.2% of the original version and additional performance improvements
    Source code(tar.gz)
    Source code(zip)
  • v10.2.1(Jul 4, 2021)

    v10.2.1 โœจ

    • ๐Ÿงน Removed: preventDefault on Tab key press event
    • ๐ŸŽ›๏ธ Updated: No Results Found example under How-to Guides in documentation
    Source code(tar.gz)
    Source code(zip)
  • v10.2.0(Jul 3, 2021)

    v10.2.0 โœจ

    • โž• Added: submit API property controls Enter button default behavior (Thanks ๐Ÿ‘ @CodeWithOz) #249 #224 #189
    • โž• Added: query parameter to the start("query") API method for programmatic operations
    • ๐Ÿ”ง Fixed: Generated errors when resultsList is disabled due to the attachment of the keydown event
    • ๐ŸŽ›๏ธ Updated: Library code with minor optimizations
    • ๐Ÿงน Removed: Engines field in package.json
    Source code(tar.gz)
    Source code(zip)
  • v10.1.5(Jun 18, 2021)

    v10.1.5 โœจ

    • ๐Ÿงน Removed: preInit stage (Thanks ๐Ÿ‘ @folknor) #229
    • ๐Ÿ”ง Fixed: unInit to remove the wrapper element (Thanks ๐Ÿ‘ @deniseismo) #245
    Source code(tar.gz)
    Source code(zip)
  • v10.1.4(Jun 16, 2021)

  • v10.1.3(Jun 9, 2021)

  • v10.1.2(Jun 2, 2021)

  • v10.1.1(Jun 1, 2021)

  • v10.1.0(Jun 1, 2021)

    v10.1.0 โœจ

    • โž• Added: wrapper API property controls wrapper rendering (Thanks ๐Ÿ‘ @folknor) #227
    • ๐Ÿ”ง Fixed: TypeError: "query" is read-only (Thanks ๐Ÿ‘ @n1k0) #231
    • ๐Ÿ”ง Fixed: Mouse click item selection error (Thanks ๐Ÿ‘ @victor-paumier) #232
    Source code(tar.gz)
    Source code(zip)
  • v10.0.4(May 29, 2021)

  • v10.0.3(May 29, 2021)

    v10.0.3 โœจ

    • ๐Ÿ”ง Fixed: Scrolling issue moving the entire page
    • ๐Ÿ”ง Fixed: Searching Numbers issue (Thanks ๐Ÿ‘ @folknor) #226
    Source code(tar.gz)
    Source code(zip)
  • v10.0.2(May 29, 2021)

  • v10.0.1(May 29, 2021)

  • v10.0(May 29, 2021)

    v10.0 โœจ

    Important Note:

    This release has several breaking changes, so kindly check all the below changes.

    • โž• Added: Automatic field wrapping inside DIV
    • โž• Added: Document readyState listener that initializes the library after DOM content is loaded
    • โž• Added: query value to data.src for easier data fetching
    • โž• Added: resultsList navigation auto scrolling for long lists
    • โž• Added: resultsList.tabSelect API property to control tab button behavior
    • โž• Added: events list API property that holds and assigns events to input & list (Thanks ๐Ÿ‘ @stell) #223
    • โž• Added: close API method controls resultsList state
    • โž• Added: open API method controls resultsList state
    • โž• Added: goTo API method controls resultsList navigation by index
    • โž• Added: next API method controls resultsList navigation
    • โž• Added: previous API method controls resultsList navigation
    • โž• Added: select API method controls resultsList selection by index
    • โž• Added: search API method to avail autoComplete.js powerful engine for external use
    • โž• Added: isOpen API boolean property that holds resultsList state true opened false closed
    • โž• Added: list API property holds the entire list html element
    • โž• Added: wrapper API property holds the entire wrapper html element
    • โž• Added: cursor API property holds the index of the current selection or -1 or undefined for idle
    • โž• Added: id API property holds the current instance number
    • โž• Added: name API property that changes all the className properties accordingly
    • โž• Added: options API property that holds all the custom set config options for separation
    • โž• Added: data.src fetching error message/instance to response event detail (Thanks ๐Ÿ‘ @folknor) #207
    • ๐Ÿ” Updated: Data caching with a better mechanism
    • ๐Ÿ” Updated: WAI-ARIA configurations for significantly better support
    • ๐Ÿ” Updated: dataFeedback event information
    • ๐Ÿ”ง Fixed: diacritics highlighting issue in strict mode
    • ๐Ÿ”ง Fixed: resultsList eventEmitters unexpected behavior which was firing multiple times
    • ๐Ÿ”ง Fixed: Empty className values do not assign any classes instead of undefined
    • ๐ŸŒ€ Changed: The core library architecture for an improved performance and code separation
    • ๐ŸŒ€ Changed: API to only include the used options instead of including unused ones with undefined value
    • ๐ŸŒ€ Changed: fetch eventEmitter name to response
    • ๐ŸŒ€ Changed: inputField API property name to input
    • ๐ŸŒ€ Changed: dataFeedback API property name to feedback
    • ๐ŸŒ€ Changed: trigger API property type from Object to Function formerly called trigger.condition
    • ๐ŸŒ€ Changed: data.results API property name to data.filter
    • ๐ŸŒ€ Changed: noResults API to accept boolean instead of Function to be replaced with resultsList.container
    • ๐ŸŒ€ Changed: resultItem.highlight API property type from Object to accept Boolean or String formerly called resultItem.highlight.class
    • ๐ŸŒ€ Changed: resultItem.selected API property type from Object to String formerly called resultItem.selected.class
    • ๐ŸŒ€ Changed: resultItem.content API parameters order from (data, element) to (element, data) for consistency
    • ๐ŸŒ€ Changed: resultItem.idName API property name to resultItem.id
    • ๐ŸŒ€ Changed: resultItem.className API property name to resultItem.class
    • ๐ŸŒ€ Changed: resultItem.content API property name to resultItem.element
    • ๐ŸŒ€ Changed: resultsList.idName API property name resultsList.id
    • ๐ŸŒ€ Changed: resultsList.className API property name resultsList.class
    • ๐ŸŒ€ Changed: resultsList.container API property name to resultsList.element
    • ๐ŸŒ€ Changed: Highlighted characters wrapper element to be mark instead of span (Thanks ๐Ÿ‘ @aarongerig) #195
    • ๐ŸŒ€ Changed: query API property type from Object to Function formerly called query.manipulate
    • ๐ŸŒ€ Changed: observer API property name observe
    • ๐ŸŒ€ Changed: data.key API property name data.keys
    • โ— Removed: onSelection API method to be replaced with selection eventEmitter
    • โ— Removed: resultsList.render API property to be replaced with resultsList to accept Boolean instead of Object in case of disabling list rendering
    • โ— Removed: trigger.event API property to be replaced with events
    • โ— Removed: feedback API method to be replaced with navigate event
    • โ— Removed: resultsList.navigation API method to be replaced with events
    • โ— Removed: nav API property to be replaced with events
    • โ— Removed: hook API method to be replaced with start API
    • โ— Removed: onSelection API method to be replaced with selection eventEmitter
    • โ— Removed: input property from feedback due to the existence of query already
    • โ— Removed: unInit eventEmitter
    Source code(tar.gz)
    Source code(zip)
  • v9.1.1(May 1, 2021)

    v9.1.1 โœจ

    ! Important Note:

    Starting next major release:

    1. "noResults" API will accept "Boolean" instead of function to be replaced with "resultsList.container"
    2. "fetch" eventEmitter will be renamed to "response"
    3. All "className" APIs will be renamed to "classList"
    • ๐Ÿ”ง Fixed: Data feedback inputField value was in lowerCase instead of raw
    • ๐Ÿ”ง Fixed: resultItem.className did not accept except one class instead of multiple
    • ๐Ÿ” Updated: Code with deep refactoring & cleanup (Thanks ๐Ÿ‘ @Pirulax) #210
    Source code(tar.gz)
    Source code(zip)
  • v9.1.0(Apr 30, 2021)

    v9.1.0 โœจ

    ! Important Note:

    Starting next major release:

    1. "noResults" API will accept "Boolean" instead of function to be replaced with "resultsList.container"
    2. "fetch" eventEmitter will be renamed to "response"
    • โž• Added: New data parameter to resultsList.container method that contains (input, query, matches, results) values
    • ๐Ÿ” Updated: resultsList.container.className default value to be undefined
    • ๐Ÿ” Updated: Code with some refactoring & cleanup
    • ๐Ÿ” Updated: Development dependencies
    • ๐Ÿ”ง Fixed: resultsList error on Enter key press with no selection
    • ๐Ÿ”ง Fixed: Input field aria-activedescendant was not removed on each resultsList regeneration
    • ๐Ÿ”ง Fixed: noResults error on Enter key press
    • ๐Ÿ”ง Fixed: Input field aria-expanded set to true even when noResults was not active
    • ๐Ÿ”ง Fixed: resultsList on close event did not fire when noResults was active
    • ๐Ÿ”ง Fixed: unInit method did not remove all inputField set event listeners except for input event
    • ๐Ÿ”ง Fixed: open eventEmitter unexpected behavior that used to fire on each trigger event
    Source code(tar.gz)
    Source code(zip)
  • v9.0.5(Apr 26, 2021)

  • v9.0.4(Apr 26, 2021)

  • v9.0.3(Apr 16, 2021)

  • v9.0.2(Apr 16, 2021)

  • v9.0.1(Apr 16, 2021)

  • v9.0.0(Apr 10, 2021)

    v9.0.0 โœจ

    This version has breaking changes, kindly check the list
    • ๐Ÿ”ง Fixed: esc button not working with noResults in some cases (Thanks ๐Ÿ‘ @sunshineplan) #157
    • โž• Added: selection & highlight custom className API methods (Thanks ๐Ÿ‘ @jerrykan) #184
    • โž• Added: eventEmitter for resultsList fires on list close event (Thanks ๐Ÿ‘ @yliharma) #188
    • โž• Added: event parameter to trigger.event API method (Thanks ๐Ÿ‘ @nornes) #189
    • ๐ŸŒ€ Changed: maxResults API moved under resultsList
    • ๐ŸŒ€ Changed: noResults API moved under resultsList
    • ๐ŸŒ€ Changed: highlight API moved under resultItem
    • ๐ŸŒ€ Changed: selection API moved under resultItem with the name of selected
    • ๐ŸŒ€ Changed: rendered eventEmitter name to open
    • ๐ŸŒ€ Changed: navigation eventEmitter name to navigate
    • ๐ŸŒ€ Changed: closeAllLists refactored and renamed to closeList
    • ๐ŸŒ€ Changed: generateList stage with some refactoring
    • ๐ŸŒ€ Changed: start stage with some refactoring
    • ๐ŸŒ€ Changed: noResults API method with some refactoring details
    • ๐ŸŒ€ Changed: highlight API from String to Object details
    • โ— Removed: sort API due to its redundancy data.results could be used instead
    • โ— Removed: connect eventEmitter from the preInit stage
    • ๐Ÿ” Updated: Replaced Uglify with Terser
    • ๐Ÿ” Updated: Development dependencies
    • ๐Ÿ” Updated: Code comments
    • ๐Ÿ” Updated: Documentation
    Source code(tar.gz)
    Source code(zip)
  • v8.3.2(Feb 15, 2021)

  • v8.3.1(Feb 9, 2021)

  • v8.3.0(Jan 30, 2021)

Owner
Tarek
UI/UX Designer & Front-End Developer
Tarek
๐ŸŽ A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Jan 1, 2023
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022
๐Ÿ”ฎ Fast and full-featured autocomplete library

Autocomplete A JavaScript library that lets you quickly build autocomplete experiences ?? Autocomplete v1 is in an alpha phase and early feedback is w

Algolia 2.3k Jan 6, 2023
๐Ÿ”ฎ Fast and full-featured autocomplete library

A JavaScript library that lets you quickly build autocomplete experiences All you need to get started is: A container to inject the experience into Da

Algolia 2.3k Jan 1, 2023
A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM, JSON and Jest tests.

RUNNING BUNNY A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM

Ana Paula Hรผbner 27 Mar 29, 2022
A vanilla JS customisable select box/text input plugin โšก๏ธ

Choices.js I'm looking for active maintainers for this project as I no longer have the time to support it. Please get in touch if you're interested ??

Josh Johnson 5.4k Jan 7, 2023
Simple autocomplete pure vanilla Javascript library.

autoComplete.js โœจ Simple autocomplete pure vanilla Javascript library. ?? Live Demo v8.3 autoComplete.js is a simple pure vanilla Javascript library t

Tarek 3.7k Dec 31, 2022
Autocomplete component created with pure javascript

Pickle Complete Pickle complate is a autocomplate component written as completely pure javascript. Just send json object or request information have f

Kadir BarฤฑลŸ Bozat 2 Jul 5, 2022
๐Ÿฆ โœจ Simple multi-select pure vanilla Javascript library.

multiSelect.js โœจ Simple multi-select pure vanilla Javascript library. ?? Live Demo v1.0.8 multiSelect.js is a simple, pure vanilla Javascript library

Jacob Kleiman 5 Mar 15, 2022
curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.

graphqurl graphqurl is a curl like CLI for GraphQL. It's features include: CLI for making GraphQL queries. It also provisions queries with autocomplet

Hasura 3.2k Jan 3, 2023
Lightweight vanilla js modal component (just 2kb) , pure javascript Modal

Lightweight vanilla js modal component (just 2kb) pure javascript Modal , This is just 2kb Lightweight vanilla js modal component with zero dependenci

Salah Eddine Lalami 12 Dec 12, 2022
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

tail.select.js - Beautify Select Fields (formerly tail.select) Replace and Improve your HTML <select> fields with style and without jQuery! The tail.s

Ciprian Popescu 69 Dec 30, 2022
๐ŸŽ A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Dec 28, 2022
๐ŸŽ A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Jan 1, 2023
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022
๐Ÿ”ฎ Fast and full-featured autocomplete library

Autocomplete A JavaScript library that lets you quickly build autocomplete experiences ?? Autocomplete v1 is in an alpha phase and early feedback is w

Algolia 2.3k Jan 6, 2023