Question

$ (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")
       }
    }
  }

});

所以这是我的javascript代码，我无法让它工作。试图了解如何使用下拉列表创建一个搜索栏，与facebook一样。

任何可以帮助我的人或者让我走上正确的道路？：）

Answer 1

您可以使用HTML元素执行下拉列表：

＆＃13;

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

＆＃13;

如果你有一个用JS或JSON编写的更大的英雄列表。你可以这样做：

＆＃13;

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

＆＃13;

Answer 2

首先，您需要在页面中包含jquery，因为onkeyup是jQuery的事件。

如果您将字段与搜索值进行比较，则需要使用

获取输入值

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

抱歉我的英语不好，;）

Answer 3

这是ES6解决方案。您可以使用template litterals（语法为`${}`）来准备<div>包装器中的每个option元素。然后，每个包装器将其第一个子项（option元素）附加到<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)

});

下面，我将其实现为一个函数，您可以调用该函数将<option>添加到<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>

带有下拉结果的搜索栏

3 个答案: