<!DOCTYPE html>
<html lang="en">
<head>
   
</head>
<body>
    <div class="container">
        <h1>Filter for a city</h1>
        <form>
            <input type="text" id="text" placeholder="Enter city">
        </form>
    </div>
        <div class="display-part">
            <li id="list" style="list-style-type: none;">
            </li>
        </div>
   
</body>
</html>
body{
    background-color: yellow;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:0.1rem;
}
.container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:30vw;
    
}
form input{
    height:20px;
}
/* to be displayed list */
.city-list{
    background-color: yellow;
    font-size:1rem;
    border: 2px solid yellow;
    text-align: center;
}

const url='https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

let data=document.getElementById('text');
// fetching 
let cities;
fetch(url,{
    method:'GET',
})
.then(response=>response.json())
.then(text=>{
    cities=text.map(item=>item['city']);
    
})

let resultdisplay=document.getElementById('list');

//triggering function for whenever user enters data
let display,regex;
data.addEventListener('keyup',(e)=>{
    if(e.target.value==="") return;
 display=cities.filter(item=>{
     regex=new RegExp(e.target.value,'gi');
     return item.match(regex)
  
})


result(); //to display list
})


//displaying list of cities that matches user's input,changing user's input to the city selected by user.

function result(){
    str="";
    for(let item of display)
    {   let city=item.replace(regex,`<span style="background-color:green;">${data.value}</span>`);
        str+=`<ul><button value="${item}" class="city-list">${city}</button></ul><hr>`;  
    } 

    resultdisplay.innerHTML=str;

 //to display value of city selected by user
    try{
    let cityarr=Array.from(document.getElementsByClassName("city-list"));
    for(cityitem of cityarr){
    cityitem.addEventListener('click',(e)=>{
        data.value=e.target.value;
        resultdisplay.innerHTML="";
        //removing list after user chose city
    });}
        }catch(TypeError){
        return;
        }
    //try-catch block as if user clicks on highlighted part, due to no value given to it, undefined will be shown on text box.

    
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.