Quick Autocomplete App With JS & JSON 

Someone pointed out that I am making a request with every input event fire. Here is some revised code... const search = document.getElementById('search'); const matchList = document.getElementById('match-list'); let states; // Get states const getStates = async () => { const res = await fetch('../data/states.json'); states = await res.json(); }; // FIlter states const searchStates = searchText => { // Get matches to current text input let matches = states.filter(state => { const regex = new RegExp(`^${searchText}`, 'gi'); return state.name.match(regex) || state.abbr.match(regex); }); // Clear when input or matches are empty if (searchText.length === 0) { matches = []; matchList.innerHTML = ''; } outputHtml(matches); }; // Show results in HTML const outputHtml = matches => { if (matches.length > 0) { const html = matches .map( match => ` ${match.name} (${match.abbr}) ${match.capital} Lat: ${match.lat} / Long: ${match.long} ` ) .join(''); matchList.innerHTML = html; } }; window.addEventListener('DOMContentLoaded', getStates); search.addEventListener('input', () => searchStates(search.value));

JS starts around 6:40 if you want to skip the HTML....thanks for watching!

I noticed that matchList inerHTML does not reset when matches array is/gets empty. So, you should add this if statement in the searchStates function: if (matches.length === 0) { matchList.innerHTML = ''; } this will clear the innerHTML in case the input does not match with the regex.

Thanks Brad...All your videos are very very good and helpful. And please do a video on SEO Brad...that would be nice.

For those who have an error while fetching data: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 This is happening because fetch() fires up from index.htlml instead of main.js . Just delete from fetch request: "../" or put .html and .js files in same folder, this worked for me. If we will look at Brad's Live Server URL we would see that index.html have no parent folder, so fetch can't execute request: "../".It can't go level up to parent directory because its don't exist on port 5501 in this case, so it works just OK in this video. My localhost look like this: 127.0.0.1:5500/JS/Autocomplition/index.html and it get error while fetching data from states.js, because fetch have place to go while executing this part of path: "../".

nice use of async/await, regex and template literals ;)

great job, tnx, Brad if use destructuring assignment code may be some shorter let matches = states.filter(({ name, abbr }) => { const regex = new RegExp(`^${searchText}`, 'gi') return name.match(regex) || abbr.match(regex) }) const html = matches.map(({ name, abbr, capital, lat, long }) => ` ${name} (${abbr}) ${capital} Lat: ${lat} / Long: ${long} `).join('')

Thanks Brad! Because of your mern stack course I got first place in a local Bootcamp , thanks !!

This is a great! I just wish it included a function to select the state so that you could complete the search. Afterall, we must assume that once they search they'll want to go to a page or resource.

Would it be more performant to do the api fetch once, and then have the "input" event merely do the filtering? Your code fires a new ajax request on every single keystroke. Or maybe that's the preferred method? I dunno.

great work by educating people, the code make sense as you describe it but could you create "part2" with refactoring? There are few parts that set up bad habbits: #1 as the states.json data is still the same (and usualy is in autocomplete), you should load it once instead of every keystroke. Extra request for each key is not a good idea. #2 "fail-fast" - if there is no input, you dont need to execute the filter loop (and save up some time), you can check for the length at the start and simply call outputHtml([]); #3 prepare regular expression outside of the filter loop. Now you are preparing new regex for each iteration while you can set it up before loop once. #4 as separation of concerns, clearing up the match-list should still be done in outputHtml function instead of extra condition in searchStates. In here, simple else case will do it. (this is first step for the separation, there are more candidates like preparing html vs altering dom) optional #5 introduce debounce/throtle functionality to limit number of operation for keystrokes keep up the good work!

For those who have an error while fetching data: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 You just need to take out the "../" from fetch() method. You can use like this: fetch('data/states.json'); This works here.

I vote up before I even watch it because it's Brad!

Liking before watching the video because it's Brad!

MR Brad you've done it again. To be honest all your content are always great, I mean really great and helpful, they also relates to real world projects. Thanks so much for this amazing project. I personally created my own project which I actually included the search engine but didn't know where to find a tutorial project related to what and how I actually want the search engine to function like. Until I found one from you today. I'm curious sir, incase I want the data from the JSON file/package to be specifically customized to my need, how do I do that please. Looking forward for your response sir!

I always learn something. I liked the map with the html + join. Definitely adding that to the toolbox.

Hey Brad, you can actually use emmet in js. You just need to add this setting in your vs code setting.json "emmet.includeLanguages": { "javascript": "html" },

i have error on this line - const states = await res.json(); - on res.json (); Chrome Compiler says " Uncaught (in promise) SyntaxError: Unexpected end of JSON input at searchStates "

Thanks, Brad for the great video. Question - what would be the best practice if the array or object of items is really massive? For example, if we want to use for autocomplete all cities of t world. I assume fetching whole such JSON would significantly hog the local memory. Is there any way around it in terms of performance or is it better to load from the database in such a case?

Hi, thanks for the good video. I have a question, hope you can help me. How can i make the search result clickable ? I want to make it to give more info when user click the search result. For example, when user type "ma", the search result would show maine, maryland, etc. The user decided to know more about maryland. So when she click maryland, it would show new layer (not separated page about maryland, maine, etc. since making all the separated result page like maryland.html , maine.html, kinda waste space. ). i think i can imagine how to make the new layer(maybe using css+js or open html on html( htmla(htmlb) sort thing), but i cant understand to make search result is clickable and use the current data from the clicked result to generate it's other data(json already added new data, just not showned on search) . Maybe you could help me. . Thanks.

you can do this more optimal. now you fetch all data evety time when key press regards what you type. if you have milion records this may be veery slow. second you fetch all data and then if value is empty you clear result. you better stop fetch data in that situation. or for example you can fetch all data on start and then only filter it in thath event. besides that very nice video 🤗

How do I make those results clickable and direct to a page ?

I did not know you could use an array to write html ! :O Nice method! Thanks Brad!

Great video as always Brad but you can have (matchList.innerHTML = "";) in the else part of the outputHTML function instead of the searchText.length if condition for better functionality.

Brad Traversy is a machine himself. Thanks for yet another super video. You are an inspiration to many upcoming developers.

Hi! Beginner here :) i've been battling this error for 2 days...(in promise) TypeError: Cannot read properties of undefined (reading 'filter') I get 304 in the response header, and i see the (lint validated) json data itself in the response ...what could i be doing wrong?

*This code has a bug* If you type "mc" in the textbox the list will continue to show. This is what is happening - If the first character finds a match and then you enter a second character, which results in no matches - then the list continues to show. When there are no matches the user does *not* expect to see a drop down list. Update the code with this and that should fix the problem if ((searchText.length === 0) || (matches.length === 0)) { matches = []; matchList.innerHTML = ''; }

Thank you for the tutorial. But İ have a question. Let's suppose that we have 50 thousand cities in that JSON file. Isn't that gonna be time consuming to await fetching all of them? Is there a way to deal with my problem?

Hello, thank you for the video !

Is it possible to remake the same logic with a datalist element of html5? I mean applying innerHtml function to put new options and values from server? I made it with keyup and I got results than I updated my options and values with the new data but the list won't show up under my input text.! I inspected Firefox and Chrome dev tools every thing is OK but the list still dummied or hidden.

in this ligne: const regx= new RegExp(`^${searchText}`,'gi'); why we us searchText

Great video , I’m watching this from 16000 km from the US.

There's still one issue with the code i guess, suppose i search for "axzcib..." as soon as i type "a" it shows me states starting with "a..", but when i continue to type other letters such as x,z,etc the previous search result stays there which should go away as there's no state starting with axz... Can someone tell me how to fix this???

Thanks for the great work. Selecting the suggesion and showing it in the text box is not in the code. Can you please include it.?

Great.. How to fetch from multiple json files.??

ill watch before my breakfast !!!im in san francisco just yr video woke me up :)

Is there a solution if I have cors policy when I am getting the API?

wow!! no hablo ingles pero me ayudo muchisimo, muchs gracias por estos videos

thanks man small issue, it will bug out if you input some special characters

please make a video on how to make fetch items from server and display on html page like in an ecommerce website

Thanks for the awesome video, i realised that with this method, user is unable to click the dropdown list or pressing down to select through the list. Is there a way to enable this?

Wow I just started learning about Fetch API and Async/Await stuff. Brad is always on point with the trend.

You are so awesome! Brad. thank you for all of your videos.

This is one channel that i dont even wait to watch the video before liking... You are awesome traverse

thanks! question how selecton or clic of the list and write the input

Hey can you not show us how to click on the selected name so it can then send the value to fetch the data?

how would you write : search.addEventListener('input', () => searchStates(search.value)); as a normal function ?

Love this small projcet!!! Please do them often!

Hi Brad, I'm having issue connecting my js and my json files to my php+html files. I have my js file in a folder, json in another folder, and my php+html file in another folder. I'm not sure if my path is wrong or something but I can't figure it out. I use Xampp as my localhost. btw, all three of these folder are in another folder, and this folder is in the htdocs. Here was my path that i place in my php+html file to connect with the js files and the json files. scr="Airlines/js/main.js", scr="Airlines/json/states.json. neither one seems to work... is it possible if you could help me? thanks

This is an awesome feature! I want to create a music JSON file with Songs and Artists listed and allow users to search for either a song or an artist from an external webpage. Since this requires the index.html file to be opened via a Live Server for it to work, how can this feature be used by external users? Does this work without doing anything else if it's on an external published webpage?

I am using a json datafile that has nested objects. If I use a non-nested object it all works fine. To use a silly example, if I use match.pokemon I get a result. But If I try match.pokemon.type i get nothing.. can anyone tell me if there is a workaround for using embedded objects?

Now this is possible natively with

0:00 - 0:05 BEST 5 SECONDS

Thank you so much, it helped a lot, however Can you mention , how can I SELECT a line by clicking any results? to return that selected line's data back ? thanks (yeah I'm beginner lol)

Such a good video. Can you tell me how to write a regex for a string with whitespace? I have a JSON file with airports and sort by IATA codes and airport names. Until now, the match for the names throws me this: "TypeError: Cannot read property 'match' of null".

I will name my first son after you, this saved my ass so badly, I haven't worked with fetch api in such a long time. I had no clue where to even begin to do this typeahead search from a local Json. Had to adapt some of the code since I use TS and Angular but you are truly a lifesaver.

can you please create one video on how google autocomplete api works? I have a table for addresses and all data split into different columns like door/propertyname/street/district/town/city/postcode. If user search for any restaurant name which is stored in propertyname it doesn't work properly if I concatenate all columns and perform a search through wildcard character like '%' + concate_full_address + '%', it works but gives the most related results way in the bottom they suppose to be on top.

hey Brad, how do i run this from the web? when I load the index.html online I dont get any results showing?

Hi! I've tested Brad's updated snippet, followed the video & noted advice here on getting the files on the same level, checking JSON, keeping at the bottom of the HTML. I still have error "Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null" whenever inputting search terms. The match-list is never populated. Does anyone have any ideas please? My code: github.com/rachelwong/js-builds/tree/master/JSONFilter

Hey there, in this video your input field keeps showing "portfolio" as a random dropdown option. I am having the exact same issue but a different string, and I want that to go away! Ever figure out what that was? Thanks!

Excellent

Be honest, Im watching this completely new to this, trying to learn. This is another video for people who are at your level, not for people actually trying to learn.

@Traversy media plzzz provide the revised code

Why wouldn't you post the HTML?

Hey Brad, thanks for the video its great. I just have some issue and i cant find solution online. I have been trying to upload this on my gitHub repo, and there is an error Failed to load resource: the server responded with a status of 404 () app.js:9 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 2app.js:14 Uncaught TypeError: Cannot read property 'filter' of undefined at searchStates (app.js:14) at HTMLInputElement. (app.js:46) Could someone please help me out. Thanks a lot.

How can I store files in base 64 on mongodb?

great

Just discovered another problem, everything now works perfectly in Live Server in Visual Code, but when uploaded to my host server, it just doesn't work at all, it was throwing up some errors in Console, but I moved the JS to to bottom of the page and that removed them, but the search returns nothing.

unexpected character at line 1 column 1 of the JSON data ​why??

when the input is not same its still showing somthing. why

This is an excellent tutorial and has helped me build a search app for plants (instead of states). I'm trying to extend it just a bit by allowing the user to select which keyword in the json data to search on. For example, my json data has names like "Name", "Cultivar" and "Reference" each with their own values. I'd like to allow the user to select any of those json names (Name, Cultivar or Reference) on which to match. Here's the relevant code as it stands: const search = document.getElementById('search'); const matchList = document.getElementById('match-list'); let plants; // Get plants const getPlants = async () => { const res = await fetch('data/plants.json'); plants = await res.json(); }; // Filter plants const searchPlants = searchText => { // Get matches to current text input let matches = plants.filter(plant => { const regex = new RegExp(`^${searchText}`, 'gi'); return plant.Name.match(regex); }); As you can see, the search only uses "Name" for the matching. I'd like that to be variable based on user input (Name, Cultivar or Reference). Could anyone suggest how to do this or point me to an online reference that explains how to do this. Thanks!

const res = await fetch("../data/states.json"); I have a problem with this line =/

Brad Traversy, React Native with Redux Saga. Cant find no one doing it.

Thanks Brad.

a very useful video, thank you buddy short information for other users: If you want to search for only ONE keyword like "name" or "abb" or anything else, you also can use the html-tag : Load the json file with js > great a DOM with all the keyword options in your html document > choose your certain keyword option in the input tag by "keydown actions" or by the "button down arrow" in the right of the input > create a new "addEventListener() method" for the "key-enter" or "mouse-klick" action after the input is filled or one element of the list is selected > create a new DOM object like a or with all the json data of the selected keyword option. The is a very easy and useful html tag for a seach bar function ...

Does anyone know of any references that show how to do something similar in Typescript? Thanks!

Does the Fetch API do any internal caching? Because the call to the fetch() function happens on every keypress, and that seems really inefficient (as opposed to reading the JSON data just once when the page starts up). Also, I think the regex const value should be set before the states.filter() call. In its current location, a new regex is instantiated for each element in the states array. Also, I would handle the empty list condition in the outputHtml() function, as you're already passing in an empty array when the searchText is empty: const outputHtml = matches => { if (matches.length > 0) { // existing code to output the array of states } else { matchList.innerHTML = ''; } }

Is it possible to use this method in a select field of a form? I am trying to get the javascript to output to an optgroup instead of a div, but I'm guessing that this will not work before I even compile.

Thanks a lot, this tutorial appeared very useful for me. I've made a suggestion engine on Python with FastAPI that sends out suggestions to requests containing a prefix. So I wanted to make a decent web UI for this thing, and following this video I've managed to do it. Instead of fetching data from a JSON file I send a prefix to my script and it returns a JSON reply. The rest of the code is basically the same. This video is awesome and explained very clear, even for a Python-based guy who's not too familiar with JS

That went over my head, but I still liked it. Gotta dive into some complicated stuff to get better. One thing only, I'd have loved for you to slow down a little bit and explain things with a bit more details. Unless, this is aimed intermediate/advanced people, then I understand.

done and dusted thanks man you are a legend

i love you men for real hahahaha you are a fucking life saver, greetings from brazil

Very cool, but how to actually click on an element and have it displayed in the field?

hey brad, I have a error like ReferenceError: document is not defined how can I fix it

I don't understand very well English but you are awesome, your videos are amazing and I love them. I could understand async/await with this video and I'm very grateful with you. I would wish had to know your channel 1 or 2 years ago jaja. Thanks!

I get some much value our of the side topics in these videos. I have been looking for general stylesheets that I can use to quickly build websites. Does anyone know of any stylesheets that don't depend on class names. For example, stylesheets that style headings, lists, backgrounds, etc.?

How can I load JSON from url?

Do you need the document.getelementbyid? Does the browser automatically define a variable with the same name as the Id of the input element?

Just looking for it Brad 😀😀 Thank you man

Hello, tried to implement this code inside my project in VS2019 (asp.net core, MVC), but it doesn't relate to the CSS/HTML tags that inside the JS file (main.js). its reading the tags as a string or something. somebody knows any solution to this problem there? Thanks!

Hi again Brad, I'm starting developing a website. It is still an Idea in progress which you may be intrested in. That's why I'm looking for a team. Hope you join us. Thanks

How to select values from the list by key up and down , set autofocus to true so it will be more user friendly

Hey brad or anyone viewing the comments, love the vid and got it working! Was wondering if you knew of a way to make the drop down floating above the other things on the page... I have it setup on a search engine type page with suggested links under and it pushes those links down and off the page, any suggestions would be great! Thanks

Race condition - type m then delete it and type p. What prevents this scenario: m results arrive from server after p. Bug

I am getting an syntax error: unexpected token:'

".filter function isnt a function ". what should we use when the file isnt an array

Thank you so much , been trying all day with examples and no real tutorial other than yours. You explained everything really good, cheers mate.

Uncaught (in promise) TypeError: Cannot read property 'match' of undefined Can somebody tell me the problem in this?

I just spent a full weekend looking up the best way to do this and this is the simplest solution i've seen so far. THANK GOD WE HAVE BRAD

can i get your fucking codesource