Question

我想我真的很接近这个，但我在将搜索功能放在现有代码中时遇到了麻烦。

我想要它，以便如果搜索到的单词腐蚀为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":"nphillips7m@ebay.co.uk","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":"llawrence7o@technorati.com","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

Answer 1

此解决方案不允许部分匹配或不区分大小写。希望这会有所帮助：）

＆＃13;

var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m@ebay.co.uk","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":"llawrence7o@technorati.com","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;
     }
   }
}

＆＃13;

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

＆＃13;

Answer 2

嗯，你只需要定义你的myFunction。基本上用你已有的功能创建一个函数，以便在单击按钮时执行。

//this could be outside because is like the data base
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m@ebay.co.uk","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":"llawrence7o@technorati.com","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事件的功能，以便搜索用户类型。

Answer 3

可以做这样的事情。因为myFunction之前没有定义，所以我的小提琴有些问题。我这样修改了：

<script>
var users = [{"username":"nphillips7m","first_name":"Nicole","last_name":"Phillips","email":"nphillips7m@ebay.co.uk","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":"llawrence7o@technorati.com","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

我在哪里可以在这个javascript中放置搜索功能？

3 个答案: