List of options or suggestions which appears when an <input> is focussed.
Live demo: https://jsfiddle.net/j8Lbr4uy/
<div id="my-auto-input-box">
<input data-options="Red, Blue, Green, Yellow">
</div>
<script>
document.querySelector('#my-auto-input-box').inputAutofillSuggest();
</script>
<div id="my-auto-input-box">
<input>
</div>
<script>
document.querySelector('#my-auto-input-box').inputAutofillSuggest(['Red', 'Blue', 'Green', 'Yellow']);
</script>
Requires you to supply:
- A URL which can be
fetch()ed as JSON - A function which converts the fetched JSON into an Array, that will be used as the input options list
<div id="my-auto-input-box">
<input>
</div>
<script>
function extractionFunction(inputJSON) { return Object.values(inputJSON); }
document.querySelector('#my-auto-input-box').inputAutofillSuggest('https://gist.githubusercontent.com/mshafrir/2646763/raw/8b0dbb93521f5d6889502305335104218454c2bf/states_hash.json', extractionFunction);
</script>
Only supports providing options as data-options attribute.
<div class="my-auto-input-boxes">
<input data-options="Red, Blue, Green, Yellow">
</div>
<div class="my-auto-input-boxes">
<input data-options="Cafe, Petrol Station, Restaurant, Office, Museum">
</div>
<div class="my-auto-input-boxes">
<input data-options="Phone, Laptop, Desktop, Tablet">
</div>
<script>
document.querySelectorAll('.my-auto-input-boxes').inputAutofillSuggest();
</script>
Include the CSS in <head> (optional, you could adapt your own styles based on the .inputAutoSuggAutoBox and .inputAutoSuggAutoBox-visible classes):
<link href="https://cdn.jsdelivr.net/gh/williamy2k/input-autofill-suggest/inputautofillsuggest.min.css" rel="stylesheet">
Include at the end of <body>:
<script src="//unpkg.com/string-similarity/umd/string-similarity.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/williamy2k/input-autofill-suggest/inputautofillsuggest.min.js"></script>