javascript - 尝试创建搜索系统

问题描述

我的html

 <input type="text" placeholder="Search Posts" class="filterPosts"/>

    <ul class="postsList">

    </ul>

我的 Posts.json 但我认为这是对的，因为我在这里什么也不做

{
  "posts" : [
    {
      "name" : "Como fazer um SearchBox",
      "url" : "https://google.com",
      "description": "blablavlablablabla bla blablabla"
    },
    {
      "name" : "Melhores apps para programar",
      "url" : "https://youtube.com",
      "description": "blablavlablablabla bla blablabla"
    },
    {
      "name" : "Como fazer PIPOCA!",
      "url" : "https://epic5.netlify.com",
      "description": "blablavlablablabla bla blablabla"
    },
    {
      "name": "Como fazer pipoca quente na manteiga!",
      "url": "https://google.com",
      "description": "pipoca r mt bom"
    },
    {
      "name": "Como dançar beat it",
      "url": "https://google.com",
      "description": "pipoca r mt bom"
    }
  ]
}

我的代码

let inputS = document.querySelector('.filterPosts');
let inputSearch = inputS.value.toUpperCase();
let pList = document.querySelector('.postsList');
let allLi = document.getElementsByTagName('li');

let requestURL = 'Posts.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);

request.responseType = 'json'; request.send();

request.onload = function() {
  let posts = request.response; 
  showPosts(posts);
  search(posts);
}

function showPosts(jsonObj) {
  let posts = jsonObj['posts'];
  for (let i = 0; i < posts.length; i++) {

     let listContent = document.createElement('a');
     listContent.textContent = posts[i].name;
     listContent.href = posts[i].url;

      let liItem = document.createElement('li'); 
      liItem.appendChild(listContent);
      pList.appendChild(liItem);

  }
}

function search(jsonObj) {
  let t = jsonObj['posts'];
  for (let i = 0; i < t.length; i++) {
    txtValue = t[i].name;

    if (txtValue.toUpperCase().indexOf(inputSearch) > -1) {
      allLi[i].style.display = 'block';
    } else {
      allLi[i].style.display = 'none';
    }
  }
}


  inputS.addEventListener('keyup',function(){
    search();
  });

错误在搜索函数内部 (let t = jsonObj['posts'];) 在搜索输入中键入任何内容时，它返回未定义

请帮助:(我正在尝试将 json t[i].name 中的值与输入中输入的值进行比较，但我不能

标签： javascriptjson

我能够在您的代码中找到错误，我让它在这里工作，我取出XMLHttpRequest并把它放在一个变量中。问题是您search()在程序末尾调用该函数时没有任何参数。我还将比较行更改为

txtValue.toUpperCase().indexOf(inputSearch) == 0

因为我认为这更有意义，尽管> -1如果您希望它搜索整个事物，您也可以将其更改为拥有它。我希望这有帮助。我改变的另一件事是我在search()函数中添加了一行检查输入值并更新它，代码是

let inputSearch = inputS.value.toUpperCase();

我希望这有帮助。

javascript - 尝试创建搜索系统

问题描述

解决方案

推荐阅读