如何允許用戶搜索提取請求的結果？

所以我做了以下幾點：我已經完成了一個抓取請求來拉取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

如何允許用戶搜索提取請求的結果？

回答

相關問題