Creating a Search using JavaScript

Question

I am trying to create a search using JavaScript. I have created the framework, but not sure how to make it that when the user clicks on a dropdown item, it populates the input field with the selected option. What should I do? Here's my code:

HTML:

<input class="form-control searchResult" type="text" id="search" placeholder="Search">

<div id="match-list"></div>

JS:

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

const searchStates = async searchText => {
    const res = await fetch('countries.json');
    const states = await res.json();

    let matches = states.filter(state => {
        const regex = new RegExp(`^${searchText}`, 'gi');
        return state.name.match(regex);
    })

    if (searchText.length === 0) {
        matches = [];
        matchList.innerHTML = '';
    }

    if (matches.length > 0) {
        const html = matches.map((match, i) => `<div class="dropdown" id="dropdown${i}"><option class="dropdown-text" id="dropdown-text${i}">${match.name}</option></div>`).join('');

        console.log(html);
        matchList.innerHTML = HTML;
    }

}

search.addEventListener('input', () => searchStates(search.value));

JSON:

[
  {
  "name":"Afghanistan",
  "phoneCode":"+93",
  "capital":"Kabul",
  "abbr":"AFG"
  },
  {
  "name":"Albania",
  "phoneCode":"+355",
  "capital":"Tirana",
  "abbr":"ALB"
  },
  {
  "name":"Algeria",
  "phoneCode":"+213",
  "capital":"Algiers",
  "abbr":"DZA"
  }
]

Can you make a codepen for this?

Aniketh Malyala
– Aniketh Malyala

2021-08-05 21:37:46 +00:00
Commented Aug 5, 2021 at 21:37 — Aniketh Malyala
– Aniketh Malyala, Commented Aug 5, 2021 at 21:37
on click, do stuff.

user400654
– user400654

2021-08-05 21:43:09 +00:00
Commented Aug 5, 2021 at 21:43 — user400654
– user400654, Commented Aug 5, 2021 at 21:43
w3schools.com/howto/howto_js_autocomplete.asp

Gosi
– Gosi

2021-08-05 22:45:06 +00:00
Commented Aug 5, 2021 at 22:45 — Gosi
– Gosi, Commented Aug 5, 2021 at 22:45

score 1 · Accepted Answer · 2021-08-06 21:13:54Z

1

You might be better off using the datalist tag. This will directly filter the results and react to click events:

html:

<input id="country-input list="countries">
<datalist id="countries"></datalist>
<button onClick="send">Send</button>

js:

// Store countries array in COUNTRIES
const inputDataList = document.getElementById("countries");

COUNTRIES.forEach((country) => {
  const countryOption = document.createElement("option");
  countryOption.value = country.name;
  inputDataList.appendChild(countryOption);
});

To read the input value, just get the .value from the input element:

const countryInput = document.getElementById("country-input");

const sendCountry = () => {
    // Do stuff with countryInput.value
    console.log(countryInput.value);
};

edited Aug 6, 2021 at 21:13

answered Aug 5, 2021 at 22:52

user16603402

Sign up to request clarification or add additional context in comments.

2 Comments

Yashvardhan Khaitan Over a year ago

That definitely works and I have implemented that. So now, in order to get what the user selected, I have to grab the value of the <datalist> tag, correct? Or would I grab the value of the <input> tag?

user16603402 Over a year ago

You would grab the value of the input tag. I've edited my answer ;)

Collectives™ on Stack Overflow

Creating a Search using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related