https://github.com/supersonichub1/vanilla-js-typeahead
In less than 20 lines of JS! Spent more time spinning up a Flask server and snatching Google's autocomplete API.
https://github.com/supersonichub1/vanilla-js-typeahead
flask python python3 typeahead vanilla-javascript vanilla-js
Last synced: 3 months ago
JSON representation
In less than 20 lines of JS! Spent more time spinning up a Flask server and snatching Google's autocomplete API.
- Host: GitHub
- URL: https://github.com/supersonichub1/vanilla-js-typeahead
- Owner: SuperSonicHub1
- Created: 2021-01-08T00:39:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-08T02:00:45.000Z (over 5 years ago)
- Last Synced: 2025-09-13T01:31:18.665Z (10 months ago)
- Topics: flask, python, python3, typeahead, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: https://ImpressionableHealthySweepsoftware.supersonichub1.repl.co
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla JS Typeahead
A small example displaying typeahead through the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) element and less than twenty lines of vanilla JavaScript.
```js
function removeAllChildNodes(parent) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild)
}
}
const search_box = document.getElementById("search-bar")
const datalist = document.getElementById("autocomplete")
async function handleChange(e) {
const query = e.target.value
const res = await fetch(`/autocomplete?q=${encodeURIComponent(query)}`)
body = await res.json()
removeAllChildNodes(datalist)
for (const {result, subtext} of body) {
const option = new Option(subtext, result)
datalist.appendChild(option)
}
}
search_box.addEventListener('input', handleChange)
```
## What?
I know, right! This is pretty awesome! Simple and clean typeahead without the need for a library like [typeahead.js](https://twitter.github.io/typeahead.js/), as long as you don't need more than two text boxes or images.
The only downside I currently see is that updating the results can appear slow and/or glitchy at times.
Also, if you're wondering where I'm getting my autocomplete results from, they're from Google. I request and clean them up on the backend, and then send the results to the frontend.
## Installation
With [Poetry](https://python-poetry.org/) installed:
```bash
# Clone and cd
poetry install
python main.py
```