如何在JavaScript中搜索列表中的项目？

Question

我需要搜索github API以获取存储库或用户并显示它。

我尝试了以下代码，但是无法通过API从名称中进行过滤。

有人可以帮忙吗？

var searchValue = document.getElementById("search").innerHTML;
function UserAction() {
        
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert(this.responseText);
             //Show the name based on filter
              if (searchValue.toUpperCase().indexOf(filter) > -1)            {
             //display the list of users below
           }
         }
    };
    xhttp.open("GET", "https://api.github.com/search/repositories?q="+searchValue, true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.send("Your JSON Data Here");
}

Search Repo..<input type="text" name="search" id="search" placeholder="Search for names.." onkeyup="UserAction()" />

我希望在纯JavaScript中获得如下所示的输出，严格来说没有jquery或任何其他框架。

有人可以帮忙吗？

Answer 1

首先，您需要在输入后从输入中检索值。现在，您只是获得未定义的值。

一旦有了，就需要将GitHub的响应解析为一个对象，查找响应中您感兴趣的部分，然后与过滤器进行比较。

在这里，我们将搜索词与回购名称和所有者登录进行比较。我还添加了一些基本的防抖动代码，您也许可以通过一些工作提出更强大的功能。您可能想要在这里没有错误检查，而我只是将输出转储到div中-您可能需要设置样式。

希望这会给您足够的入门知识。

var debounceInterval
var debounceWaitTime = 200 // ms
// simple debounce
function UserAction() {
  clearInterval(debounceInterval)
  debounceInterval = setTimeout(sendRequest, debounceWaitTime)
}

function sendRequest() {
  let out = document.getElementById('output')
  out.innerHTML = ''
  // you need to get this value here, not just once at the beginning
  var searchValue = document.getElementById("search").value;

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      let resObj = JSON.parse(this.responseText);
      //Show the name based on filter
      resObj.items.forEach(item => {
        // look in full_name and owner.login for searchValue
        if (item.full_name.toUpperCase().includes(searchValue.toUpperCase()) 
           || item.owner.login.toUpperCase().includes(searchValue.toUpperCase())) {

          out.innerHTML += "Repo: " + item.full_name + ' Owner: ' + item.owner.login + '<br>'

        }
      })
    }
  };
  xhttp.open("GET", "https://api.github.com/search/repositories?q=" + searchValue, true);
  xhttp.setRequestHeader("Content-type", "application/json");
  xhttp.send("Your JSON Data Here");
}

Search Repo..<input type="text" name="search" id="search" placeholder="Search for names.." onkeyup="UserAction()" />
<hr />
 <div id="output">