CODEWITHSUNDEEP
javascript
DACA92
DACA92

Reputation: 75

Search bar with dropdown results

$ (function() {
  var heroes = [
  "Abaddon",
  "Alchemist",
  "Ancient Apparition",
  "Anti-Mage",
  "Axe",
  "Bane",
 ];

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

function searchDropDown(){

    var search = heroes[i];

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

       if (search.indexOf(document.getElementById("searchBar"))> - 1) {

          alert("Sucess")
       }
    }
  }

});

So this is my javascript code and I can't get it to work. Trying to understand how to make a search bar with a dropdown list, same as the one as facebook has.

Anyone that can help me or kindly put me in the right path? :)

Upvotes: 1

Views: 9253

Answers (3)

Ivan
Ivan

Reputation: 40648

Here's an ES6 solution. You can use template litterals (the `${}` syntax) to prepare each option element inside a <div> wrapper. Then each wrapper has its first child (the option element) appended to <datalist>:

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

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

  // create the wrapper that will contain the option element
  const wrapper = document.createElement('div');

  // add the html string inside the wrapper
  wrapper.innerHTML = `<option value="${option}">`;

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

});

And below I have implemented it into a function that you can call to add <option>s to the <datalist>:

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(
  ['Abaddon','Alchemist','Ancient Apparition','Anti-Mage','Axe','Bane']
);

addOptions(
  ['Another One']
);
<input list="heroes" type="text" id="searchBar">
<datalist id="heroes"></datalist>

Upvotes: 0

Laurent Jerber
Laurent Jerber

Reputation: 51

You can do a dropdown list with an HTML element :

<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 bigger heroes list written in JS or JSON. You can do :

<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>

Upvotes: 2

dmnoguera
dmnoguera

Reputation: 46

First, you need include jquery in your page, because onkeyup is a event of jQuery.

In the if you compare a field with value of search, you need get a value of input with

<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) {
                //Use console.log, not alert, to depure is the best because you print object and navigate inside them
                //For view output, Chrome or IE -> press F12, Firefox -> install firebug and press F12. And go tab "Console"
                console.log("the word find:" + search);
            }
        }
    }
});

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

Sorry for my bad english, ;)

Upvotes: 0

Related Questions