Javascript 带有下拉结果的搜索栏 $（函数（）{ 变量=[ “阿巴顿”， “炼金术士”， “古代幽灵”， “反法师”， “斧头”， “祸根”， ]; document.getElementById（'searchBar'）。onkeyup=searchDropDown；函数搜索下拉列表（）{ var搜索=英雄[i]； for（var i=0；i-1）{ 警惕（“成功”） } } } });_Javascript

Javascript 带有下拉结果的搜索栏 $（函数（）{ 变量=[ “阿巴顿”， “炼金术士”， “古代幽灵”， “反法师”， “斧头”， “祸根”， ]; document.getElementById（'searchBar'）。onkeyup=searchDropDown；函数搜索下拉列表（）{ var搜索=英雄[i]； for（var i=0；i-1）{ 警惕（“成功”） } } } });

javascript

Javascript 带有下拉结果的搜索栏 $（函数（）{ 变量=[ “阿巴顿”， “炼金术士”， “古代幽灵”， “反法师”， “斧头”， “祸根”， ]; document.getElementById（'searchBar'）。onkeyup=searchDropDown；函数搜索下拉列表（）{ var搜索=英雄[i]； for（var i=0；i-1）{ 警惕（“成功”） } } } });,javascript,Javascript,这是我的javascript代码，我无法让它工作。试图了解如何制作一个带有下拉列表的搜索栏，就像facebook一样有谁能帮助我或帮助我走上正确的道路吗？：）您可以使用HTML元素创建下拉列表：首先，您需要在页面中包含jquery，因为onkeyup是jquery的一个事件在中，如果将字段与搜索值进行比较，则需要获取输入值 $ (function() { var heroes = [ "Abaddon", "Alchemist", "Ancient Apparition

这是我的javascript代码，我无法让它工作。试图了解如何制作一个带有下拉列表的搜索栏，就像facebook一样

有谁能帮助我或帮助我走上正确的道路吗？：）

您可以使用HTML元素创建下拉列表：

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

在中，如果将字段与搜索值进行比较，则需要获取输入值

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

});


$（文档）.ready（函数（）{
变量=[
“阿巴顿”，
“炼金术士”，
“古代幽灵”，
“反法师”，
“斧头”，
“祸根”，
];
document.getElementById（'searchBar'）。onkeyup=searchDropDown；
函数搜索下拉列表（）{
for（var i=0；i-1）{
//使用console.log（而不是alert）进行解压缩是最好的，因为您可以打印对象并在其中导航
//对于视图输出，Chrome或IE->按F12，Firefox->安装firebug并按F12。然后转到“控制台”选项卡
log（“单词find:+search”）；
}
}
}
});

对不起，我的英语不好，；）

这里有一个ES6解决方案。您可以使用（

`${}`

语法）在

包装器中准备每个选项元素。然后，每个包装都将其第一个子元素（option元素）附加到

：

const dataList=document.querySelector（“#英雄”）；
//循环遍历选项名称数组
options.forEach（option=>{
//创建将包含option元素的包装器
const wrapper=document.createElement（'div'）；
//在包装器中添加html字符串
wrapper.innerHTML=`；
//将包装器的第一个子项追加到数据列表
dataList.appendChild（wrapper.firstChild）
});

下面我将其实现为一个函数，您可以调用该函数将

添加到

：

const addOptions=options=>{
const dataList=document.querySelector（“#英雄”）；
options.forEach（option=>{
const wrapper=document.createElement（'div'）；
wrapper.innerHTML=`；
dataList.appendChild（wrapper.firstChild）
});
}
添加选项(
[《阿巴顿》，《炼金术士》，《远古幽灵》，《反法师》，《斧头》，《灾祸》]
);
添加选项(
[“另一个”]
);

很抱歉描述得不好。但我只是举了几个例子，我还有70多位英雄。谢谢，然后在数据列表中为每个英雄添加一行。如果你的列表是Javascript格式的，你可以用一个简单的Javascript代码填充数据列表。@DACA92通过Javascript数组或JSONSay运行一个循环，如果你想要类似FACEBOOK的搜索，那么请查看示例[（链接）@LaurentJerber:太好了，我正要这么做
<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>

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)

});