我將在這個JavaScript中放置一個搜索功能？

我覺得我真的很接近這一點，但我無法將搜索功能放在我現有的代碼中。我將在這個JavaScript中放置一個搜索功能？

我想要它，以便如果搜索到的單詞相關聯到last_name那麼該函數將顯示整個相關數組。沒有搜索功能，只要我在JS中指定字符串，代碼就可以正常工作。即

return item.last_name == "Simpson";

將顯示
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},

這是很大的，但我需要用戶輸入一個名稱和相應的數組，以顯示。

我有什麼至今： -

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 
<body> 

<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button> 

<div id="return"></div> 

<script> 

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"}, 
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"}, 
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}] 

var simpson = users.find(callback); 
function callback(item){ 
    var x = document.getElementById("mySeach").value; 
    return item.last_name == x; 
} 
document.getElementById("return").innerHTML = (function myFunction(){ 
    return JSON.stringify(simpson); 
})(); 

</script> 
</body> 
</html>

上午我打電話與onclick正確的功能？我甚至不確定.value是否適合這份工作。在檢查API時，它似乎是最相關的。

讓我知道是否需要更多的細節。

JSfiddle

來源

2017-02-03 gezer4000

以及您在小提琴在HTML中使用JS和MYSEARCH mySeach，錯誤太多。 –

可以做這樣的事情。由於myFunction之前未定義，因此我的小提琴有些問題。我修改爲這樣：

<script> 
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"}, 
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"}, 
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}] 


function myFunction() { 
    var x = document.getElementById("mySearch").value; 
    var simpson = users.filter(item => item.last_name == x); 
    document.getElementById("return").innerHTML = JSON.stringify(simpson); 
} 
</script> 

<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button> 

<div id="return"></div>

JSFiddle

來源

2017-02-03 17:17:13 fzxt

謝謝！那就是訣竅。 – gezer4000

好了，你只需要定義myFunction。基本上用你已經擁有的東西來創建一個函數，當點擊按鈕時它會執行。

//this could be outside because is like the data base 
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"},{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"},{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}] 

function myFunction() { //TODO rename it to something more descriptive 
    var foundUser = users.find(callback); 
    document.getElementById("return").innerHTML = JSON.stringify(foundUser); 
} 

//this goes outside because it's other function 
function callback(item){ 
    var x = document.getElementById("mySeach").value; 
    return item.last_name == x; 
}

你也可以調用在input事件funcition所以searchs的用戶類型。

來源

2017-02-03 17:08:32 Gabriel

此解決方案不允許部分匹配或不區分大小寫。希望這有助於:)

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"[email protected]","gender":"Female","sexuality":"Networked static concept","language":"Gagauz"}, 
 
{"username":"esimpson7n","first_name":"Elizabeth","last_name":"Simpson","gender":"Female","sexuality":"Future-proofed solution-oriented definition","language":"Malay"}, 
 
{"username":"llawrence7o","first_name":"Lillian","last_name":"Lawrence","email":"[email protected]","gender":"Female","sexuality":"Re-contextualized demand-driven middleware","language":"Tetum"}]; 
 

 

 
function myFunction() { 
 
    var searchValue = document.getElementById("mySearch").value; 
 
    for(var i = 0; i < users.length; i++){ 
 
    if(users[i]['last_name'] === searchValue){ 
 
     document.getElementById("return").innerHTML = JSON.stringify(users[i]); 
 
     return; 
 
    } 
 
    } 
 
}

<input type="search" id="mySearch" /> <button onclick="myFunction()">Try it</button> 
 

 
<div id="return"></div>

來源

2017-02-03 17:19:36

完美！謝謝一堆。 – gezer4000

我將在這個JavaScript中放置一個搜索功能？

回答

相關問題