Javascript 仅显示与输入匹配的项目_Javascript

Javascript 仅显示与输入匹配的项目

javascript

Javascript 仅显示与输入匹配的项目,javascript,Javascript,嘿，伙计们，我正在尝试开发一个菜单框的逻辑，该菜单框列出了一些复选框项目，在其上方是一个搜索栏，因此当用户键入其中一个项目名称时，带有复选框的项目是唯一出现的： ] 这就是我到目前为止得出的逻辑： const fetchLabel = (searchTerm) => { const searchedValues = [ ...document.querySelectorAll("input[type=checkbox]"), ].map((searchT

嘿，伙计们，我正在尝试开发一个菜单框的逻辑，该菜单框列出了一些复选框项目，在其上方是一个搜索栏，因此当用户键入其中一个项目名称时，带有复选框的项目是唯一出现的：

]

这就是我到目前为止得出的逻辑：

const fetchLabel = (searchTerm) => {
  const searchedValues = [
    ...document.querySelectorAll("input[type=checkbox]"),
  ].map((searchTerm) => searchTerm.value);
  console.log(searchedValues);
  return searchedValues;
};

const input = document.querySelector("input");
input.addEventListener("input", (event) => {
  const target = event.target as HTMLInputElement;
  let searchedValues: string[] = [];
  for (let i = 0; i < searchedValues.length; i++) {
    const element = searchedValues[i];
    if (element === target) {
      console.log("this works");
    }
  }
  // fetchLabel(target.value);
});

const fetchLabel=（searchTerm）=>{
常量searchedValues=[
…document.querySelectorAll（“输入[type=checkbox]”，
].map（（searchTerm）=>searchTerm.value）；
console.log（searchedValues）；
返回搜索值；
};
常量输入=document.querySelector（“输入”）；
input.addEventListener（“输入”，（事件）=>{
const target=event.target作为HTMLInputElement；
让searchedValues:字符串[]=[]；
for（设i=0；i


我被它的if条件部分卡住了，而且，我甚至不确定map（）
是否是最好的数组助手。我尝试实现filter（）
，但也无法取得任何进展。
我假设您只想通过复选框的值是否包括搜索的文本来过滤复选框？如果是这种情况，则需要迭代选项，检查该值是否包含搜索项，并切换显示属性：

const input=document.querySelector（“input[name=search]”）；
input.addEventListener（“输入”，（事件）=>{
const search=input.value.toLowerCase（）；
[
…document.querySelectorAll（“输入[type=checkbox]”，
].forEach（（复选框）=>{
checkbox.parentElement.style.display=checkbox.value.toLowerCase（）.includes（搜索）？null:“无”；
});
});

福
酒吧
FooBar
我假设您只想通过复选框的值是否包括搜索的文本来过滤复选框？如果是这种情况，则需要迭代选项，检查该值是否包含搜索项，并切换显示属性：

const input=document.querySelector（“input[name=search]”）；
input.addEventListener（“输入”，（事件）=>{
const search=input.value.toLowerCase（）；
[
…document.querySelectorAll（“输入[type=checkbox]”，
].forEach（（复选框）=>{
checkbox.parentElement.style.display=checkbox.value.toLowerCase（）.includes（搜索）？null:“无”；
});
});

福
酒吧
FooBar
这是我在后台收到上述答案时提出的解决方案，我计划将其标记为答案：
// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" id="myInput" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <ul id="myUL">
    <li><a class="panel-block is-active">
    <input type="checkbox" id="density" name="density" value="density">
      Density
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="holc" name="" value="holc">
      HOLC
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="tcac" name="" value="tcac">
      TCAC
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="population" name="" value="population">
      Population
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="zoning" name="" value="zoning">
      Zoning
    </a></li>
  </ul>
</nav>
`;

const fetchLabel = () => {
  let input, filter, ul, li, a, i, textValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    textValue = a.textContent || a.innerText;
    if (textValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
};

const input = document.querySelector("input");
input.addEventListener("input", (event) => {
  fetchLabel();
});

//复选框菜单
const checkboxMenu=document.querySelector（“.checkbox”）；
checkboxMenu.innerHTML=`




密度


霍尔克


TCAC


人口


分区


`;
常量fetchLabel=（）=>{
让输入，过滤，ul，li，a，i，textValue；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
};
常量输入=document.querySelector（“输入”）；
input.addEventListener（“输入”，（事件）=>{
fetchLabel（）；
});
这是我在后台收到上述答案时提出的解决方案，我计划将其标记为答案：
// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" id="myInput" placeholder="Search">
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <ul id="myUL">
    <li><a class="panel-block is-active">
    <input type="checkbox" id="density" name="density" value="density">
      Density
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="holc" name="" value="holc">
      HOLC
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="tcac" name="" value="tcac">
      TCAC
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="population" name="" value="population">
      Population
    </a></li>
    <li><a class="panel-block">
    <input type="checkbox" id="zoning" name="" value="zoning">
      Zoning
    </a></li>
  </ul>
</nav>
`;

const fetchLabel = () => {
  let input, filter, ul, li, a, i, textValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    textValue = a.textContent || a.innerText;
    if (textValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
};

const input = document.querySelector("input");
input.addEventListener("input", (event) => {
  fetchLabel();
});

//复选框菜单
const checkboxMenu=document.querySelector（“.checkbox”）；
checkboxMenu.innerHTML=`




密度


霍尔克


TCAC


人口


分区


`;
常量fetchLabel=（）=>{
让输入，过滤，ul，li，a，i，textValue；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
};
常量输入=document.querySelector（“输入”）；
input.addEventListener（“输入”，（事件）=>{
fetchLabel（）；
});
你也可以发布html吗？你也可以发布html吗？为什么在]
前面加逗号？我的意思是…document.queryselectoral（“input[type=checkbox]”，@absolute初学者我只是在数组中的每个项目后面都有一个逗号-如果以后添加项目，a）不会导致错误，因为您忘记在前一行添加逗号，b）在git diff中，它不会在更改时显示该行，它只会显示新行，我认为这更干净。谢谢。这对我来说很新鲜。为什么在]
之前加逗号？我的意思是…document.queryselectoral（“input[type=checkbox]”，@absolute初学者我只是在数组中的每个项目后面都有一个逗号-如果以后添加项目，a）不会导致错误，因为您忘记在前一行添加逗号，b）在git diff中，它不会在更改时显示该行，它只会显示新行，我认为这更干净。谢谢。这对我来说是新鲜事。