この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"},

が表示されますこれは素晴らしいですが、私は名前と表示するための適切な配列を入力するユーザーを必要としています。私がこれまで持って何

： - 私はonclickと右の関数を呼び出す

<!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>

アム？ .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を呼び出すことができます。

出典

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にはどこで検索機能を配置しますか？

答えて

関連する問題