1
$ (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? :)

3 Answers 3

2

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>

7
  • Sorry for the poor description. But I only took a few of them for the sake of the example, I have a round 70 more heroes to include. Thanks though
    – DACA92
    Commented Oct 29, 2014 at 8:53
  • Then add a line in the datalist for each heroes. If you have your list in Javascript, you can fill the datalist with a simple javascript code. Commented Oct 29, 2014 at 8:57
  • @DACA92 run a loop through javascript array or JSON
    – Ashish
    Commented Oct 29, 2014 at 8:57
  • Say If you want FACEBOOK LIKE Search then look for the example [blog.comperiosearch.com/blog/2012/06/27/… (link)
    – Ashish
    Commented Oct 29, 2014 at 8:59
  • 1
    @LaurentJerber: Great I was about to do same
    – Ashish
    Commented Oct 29, 2014 at 9:05
0

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, ;)

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.