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

所以我做了以下几点：我已经完成了一个抓取请求来拉取10个人的列表。我为列表中的三个元素设置了阵列，我希望最终用户能够搜索。所以我真正想要的是最终用户能够点击搜索栏，输入一个电子邮件地址，并将这些数据（特定于电子邮件地址）显示在框中。如何允许用户搜索提取请求的结果？

我对输入JavaScript的内容有点遗憾。任何帮助赞赏。我已经把一些代码放在下面，然后是jsfiddle。

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>

那么对于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); 
});

同样的结果填充在取它只是让他们为我已经打了一堵墙在HTML搜索选项。

jsfiddle

来源

2017-08-09 user8387535

既然你要预取数据，并将它们存储在全局变量中，我觉得剩下的过程相当简单：

用户输入的东西在搜索框中。
根据输入获取关联数据。
更新表中的数据。

骨架可能是这样的：

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 
}

注：

你应该听input事件，而不是click事件。
整个response.json().then()必须在第一个then()中退回，否则任何发生在该承诺链中的错误都不会被您的catch()捕获。

来源

2017-08-10 23:35:41 Microloft

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

回答

相关问题