我将在这个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中放置一个搜索功能？

回答

相关问题