Javascript 如何允许用户搜索获取请求的结果？_Javascript_Html

Javascript 如何允许用户搜索获取请求的结果？

javascript html

Javascript 如何允许用户搜索获取请求的结果？,javascript,html,Javascript,Html,因此，我做了以下工作：我已经做了一个提取请求来提取10个人的列表。我已经为列表中的三个元素设置了数组，我希望最终用户能够搜索这些元素。因此，我真正想要的是最终用户能够在搜索栏中单击，键入电子邮件地址，并在框中显示数据（特定于电子邮件地址）我有点不知道在JavaScript中输入什么来实现这一点。谢谢你的帮助。我在下面放了一些代码，后面是JSFIDLE HTML: <body> <div class="wrapper"> <input t

因此，我做了以下工作：我已经做了一个提取请求来提取10个人的列表。我已经为列表中的三个元素设置了数组，我希望最终用户能够搜索这些元素。因此，我真正想要的是最终用户能够在搜索栏中单击，键入电子邮件地址，并在框中显示数据（特定于电子邮件地址）

我有点不知道在JavaScript中输入什么来实现这一点。谢谢你的帮助。我在下面放了一些代码，后面是JSFIDLE

 HTML:
  <body>
    <div class="wrapper">
      <input type="search" id="myInput" placeholder="Searchbox" 
    onclick="searchFunction()" />
  <div class="container">
    <table id='myTable'>
       <tr>
          <td id="one">ID</td>
          <td id="two">Name</td>
          <td id="three">Website</td>
          <td id="four">4</td>
       </tr>
       <tr>
         <td id="five">5</td>
         <td id="six">6</td>
         <td id="seven">7</td>
         <td id="eight">8</td>
       </tr>
    </table>
  </div>
</div>
<script src="main.js"></script>

HTML：
身份证件
名称
网站
4.
5.
6.
7.
8.

那么对于JS：

 let items =document.getElementsByTagName("ul");
 let input = document.getElementById("myInput");
 let receivedData = [];
 let identifier = [];
 let name = [];
 let website = [];

   fetch("http://jsonplaceholder.typicode.com/users")
     .then(function(response) {
      if (response.status !== 200) {
      return;
    }
    response.json().then(function(data) { //data is present in array
      for (let i=0; i<data.length; i++)
      receivedData.push(data[i]);
      console.log(receivedData);

      for (let j=0; j<receivedData.length; j++)
      name.push(receivedData[j].name)
      console.log(name);

      for (let n=0; n<receivedData.length; n++)
      identifier.push(receivedData[n].id)
      console.log(identifier);

      for (let x=0; x<receivedData.length; x++)
      website.push(receivedData[x].website)
      console.log(website);
    });
  }
)
.catch(function(err) {
  console.log("Fetch Error :-S", err);
});

let items=document.getElementsByTagName（“ul”）；
让输入=document.getElementById（“myInput”）；
让receivedData=[]；
让标识符=[]；
让name=[]；
让网站=[]；
取回（“http://jsonplaceholder.typicode.com/users")
.然后（功能（响应）{
如果（response.status！==200）{
返回；
}
然后（函数（数据）{//数组中存在数据
对于（设i=0；i，因为您将预取数据并将其存储在全局变量中，所以我认为剩下的过程非常简单：
用户在搜索框中输入一些内容
根据输入获取相关数据
更新表中的数据
骨架可能如下所示：
input.addEventListener('input', onInput, false);

function onInput(event) {
  const searchString = event.target.value;
  const data = getAssociatedData(searchString);
  updateTable(data);
}

function getAssociatedData(searchString) {
  // return associated data based on the search string
}

function updateTable(data) {
  // update the table through DOM api
}

注意：

您应该侦听输入
事件，而不是单击
事件
整个response.json（）.then（）
必须在第一个then（）
中返回，否则该承诺链中发生的任何错误都不会被您的catch（）
捕获
由于要预取数据并将其存储在全局变量中，我认为剩下的过程非常简单：
用户在搜索框中输入一些内容
根据输入获取相关数据
更新表中的数据
骨架可能如下所示：
input.addEventListener('input', onInput, false);

function onInput(event) {
  const searchString = event.target.value;
  const data = getAssociatedData(searchString);
  updateTable(data);
}

function getAssociatedData(searchString) {
  // return associated data based on the search string
}

function updateTable(data) {
  // update the table through DOM api
}

注意：

您应该侦听输入
事件，而不是单击
事件
整个response.json（）.then（）
必须在第一个then（）
中返回，否则该承诺链中发生的任何错误都不会被您的catch（）
捕获