Dropdown search results bar

Question

Dropdown search results bar

$ (function() {
  var avengers = [
  "Black Widow",
  "Captain America",
  "Iron Man",
  "Thor",
  "Hulk",
  "Scarlet Witch"
 ];

document.getElementById('searchBar').onkeyup = searchDropDown;

function searchDropDown(){

    var input = document.getElementById("searchBar").value.toLowerCase();

    for (var i = 0; i < avengers.length; i++) {

       if (avengers[i].toLowerCase().includes(input)) {

          alert("Success! Avengers Assemble!")
       }
    }
  }

});

I'm encountering some issues with my JavaScript code. I'm attempting to create a search bar with a dropdown list similar to Facebook's search feature.

Would appreciate any assistance or guidance in the right direction. Thanks! :)

javascript

Answer 1

Answer №1

Creating a dropdown list using HTML elements is simple:

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes">
  <option value="Abaddon">
  <option value="Alchemist">
  <option value="Ancient Apparition">
  <option value="Anti-Mage">
  <option value="Axe">
  <option value="Bane">
</datalist>

If you have a larger list of heroes stored in JS or JSON, you can also create the dropdown dynamically:

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes"></datalist>
<script>
  var heroes = [
    "Abaddon",
    "Alchemist",
    "Ancient Apparition",
    "Anti-Mage",
    "Axe",
    "Bane",
  ];

  for (var key in heroes) {
    var optionElement = document.createElement("option");
    optionElement.value = heroes[key];
    document.getElementById("heroes").appendChild(optionElement);
  }
</script>

Answer 2

Creating a dropdown list using HTML elements is simple:

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes">
  <option value="Abaddon">
  <option value="Alchemist">
  <option value="Ancient Apparition">
  <option value="Anti-Mage">
  <option value="Axe">
  <option value="Bane">
</datalist>

If you have a larger list of heroes stored in JS or JSON, you can also create the dropdown dynamically:

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes"></datalist>
<script>
  var heroes = [
    "Abaddon",
    "Alchemist",
    "Ancient Apparition",
    "Anti-Mage",
    "Axe",
    "Bane",
  ];

  for (var key in heroes) {
    var optionElement = document.createElement("option");
    optionElement.value = heroes[key];
    document.getElementById("heroes").appendChild(optionElement);
  }
</script>

Answer 3

Answer №2

To start, make sure you include jquery on your page, as onkeyup is an event specific to jQuery.

If you want to compare a field with the value of 'search', you will need to retrieve the input value using:

<html>
    <script src="jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        var heroes = [
            "Abaddon",
            "Alchemist",
            "Ancient Apparition",
            "Anti-Mage",
            "Axe",
            "Bane",
        ];

    document.getElementById('searchBar').onkeyup = searchDropDown;

    function searchDropDown(){
        for (var i = 0; i < heroes.length; i++) {
            search = heroes[i];     
            if (search.indexOf(document.getElementById("searchBar").value)> - 1) {
                //It's recommended to use console.log rather than alert to debug more efficiently
                //To view output, press F12 in Chrome or IE, install Firebug and press F12 in Firefox, then go to the "Console" tab
                console.log("the word find:" + search);
            }
        }
    }
});

</script>
<body>
    <input type="text" id="searchBar"/>
</body>
</html>

Apologies for any language mistakes, ;)

Answer 4

To start, make sure you include jquery on your page, as onkeyup is an event specific to jQuery.

If you want to compare a field with the value of 'search', you will need to retrieve the input value using:

<html>
    <script src="jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        var heroes = [
            "Abaddon",
            "Alchemist",
            "Ancient Apparition",
            "Anti-Mage",
            "Axe",
            "Bane",
        ];

    document.getElementById('searchBar').onkeyup = searchDropDown;

    function searchDropDown(){
        for (var i = 0; i < heroes.length; i++) {
            search = heroes[i];     
            if (search.indexOf(document.getElementById("searchBar").value)> - 1) {
                //It's recommended to use console.log rather than alert to debug more efficiently
                //To view output, press F12 in Chrome or IE, install Firebug and press F12 in Firefox, then go to the "Console" tab
                console.log("the word find:" + search);
            }
        }
    }
});

</script>
<body>
    <input type="text" id="searchBar"/>
</body>
</html>

Apologies for any language mistakes, ;)

Answer 5

Answer №3

If you're looking for a solution using ES6, consider using template literals (the `${}` syntax) to create each option element within a div container. Then, append the first child of each wrapper to a datalist:

const dataList = document.querySelector('#heroes');

// iterate through the array of option names
options.forEach(option => {

  // create a div wrapper for the option element
  const wrapper = document.createElement('div');

  // set the HTML content with the option value in the wrapper
  wrapper.innerHTML = `<option value="${option}">`;

  // append the first child of the wrapper to the data list
  dataList.appendChild(wrapper.firstChild)

});

Furthermore, here is a function implementation that allows you to dynamically add options to the datalist by calling it with an array of values:

const addOptions = options => {
  const dataList = document.querySelector('#heroes');
  
  options.forEach(option => { 
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `<option value="${option}">`;
    dataList.appendChild(wrapper.firstChild)
  });
}

addOptions(
  ['Agility','Strength','Intelligence']
);

addOptions(
  ['One More Option']
);

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes"></datalist>

Answer 6

If you're looking for a solution using ES6, consider using template literals (the `${}` syntax) to create each option element within a div container. Then, append the first child of each wrapper to a datalist:

const dataList = document.querySelector('#heroes');

// iterate through the array of option names
options.forEach(option => {

  // create a div wrapper for the option element
  const wrapper = document.createElement('div');

  // set the HTML content with the option value in the wrapper
  wrapper.innerHTML = `<option value="${option}">`;

  // append the first child of the wrapper to the data list
  dataList.appendChild(wrapper.firstChild)

});

Furthermore, here is a function implementation that allows you to dynamically add options to the datalist by calling it with an array of values:

const addOptions = options => {
  const dataList = document.querySelector('#heroes');
  
  options.forEach(option => { 
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `<option value="${option}">`;
    dataList.appendChild(wrapper.firstChild)
  });
}

addOptions(
  ['Agility','Strength','Intelligence']
);

addOptions(
  ['One More Option']
);

<input list="heroes" type="text" id="searchBar">
<datalist id="heroes"></datalist>

Dropdown search results bar

Answer №1

Answer №2

Answer №3

Similar questions

Refreshing SQL Server data using an HTML form

Issue encountered: Object is not functioning properly with Node.js AuthenticationExplanation: A TypeError occurred

The next-routes server.js encounters an issue: TypeError - the getRequestHandler function is not defined within the routes

Issue with adding json_encode to the end

What is the correct way to utilize browser actions for sending keys with the "?" symbol in Protractor?

Is it possible to incorporate variables when updating an array or nested document in a mongodb operation?

Tips for resolving asynchronous s3 resolver uploads using Node.js and GraphQL

Utilize JavaScript objects to convert subscripts into HTML elements

"Conceal navigation options in Angular JS depending on whether a user is logged in or

Guide on creating a cookie in express following a successful API call

Techniques for capturing Django's output from an Ajax request

Encountering the "Component resolution failed" error in Vue 3 when using global components

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

What's the Reason Behind My Array Populating on Rebuild but Not on Page Refresh?

Exploring the power of NodeJS with nested functions for conducting in-depth search

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

The margin on the right side is not functioning as expected and exceeds the boundary, even though the container is using the flex display property

I am attempting to display only the description of the button that I click on

Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Extract data from the Ajax database and automatically hide the "Load More" button when all items