配列を検索する検索関数を作成する方法

Question

私はこのようなオブジェクトの配列を持っています。特定の文字列パターンの後にこの配列のオブジェクトをどのように検索しますか？

「私が入力した場合ベニー

'私は 'B' の結果を入力した場合は '曲げ' としなければならないベンベニー "

HTML

<form> 
    <input id="getCoins" type="text" name="getCoins" placeholder=""> 
</form> 

' 結果がどうあるべきのJavaScript

var input = document.getElementById("getCoins"); 
var arr = [0:{name: 'bent', town: 'kansas'}1:{ name:'benny', town:'vegas'}] 
input .addEventListener("keyup", function(e){ 
    console.log(filterIt(arr, input.value)); 
} 

これは私が別の投稿から試したものですが、動作させることができませんでしたか？

function filterIt(arr, searchKey) { 
    return arr.filter(function (obj) { 
     return Object.keys(obj).some(function (key) { 
      return obj[key].includes(searchKey); 
     }) 
    }); 
} 

注：私は名前だけを検索したいではなく、町

Answer 1

あなたが最初単一の項目与えられたフィルタ条件を決定する関数を定義します。項目がに含まれている場合は、が含まれています。 match()関数は、2つの引数を取りますが、filter()は一度にそのコールバックのアイテムを通過するため、我々はpartially apply

var matchingValues = arr.filter(match.bind(null, input.value)); 

：

function match(inputValue, item) { /* .... */ } 

次に、あなたがそうのようArray.prototype.filter()機能で、この機能を使用することができますbind()とinput.valueを使用してmatch()関数を関数 に変換すると、そのアイテムのみが期待されます。

は、これはやってと同じです：

var matchingValues = arr.filter(function (item) { 
    return match(input.value, item); 
}); 

私は、コードがはるかに整然として、部分的なアプリケーションを使用する場合は、理解しやすい見えることがわかります。

ああ、コメント者の1人は、OPだけがnameの部分を望んでいると指摘しました。その場合には、単に名前を抽出する.map()呼び出しをチェーン：

var matchingNames = arr 
    .filter(function (item) { 
    return match(input.value, item); 
    }) 
    .map(function (item) { 
    return item.name; 
    }); 

EDIT：あなたはまた、配列を修正する必要があります。

var arr = [{name: 'bent', town: 'kansas'}, { name:'benny', town:'vegas'}] 

私はESLintのセットアップにいくつかの時間を投資し、にその統合提案あなたのエディタは、あなたのコードが見えるように見え、少なくとも構文エラーがありません。

Answer 2

function filterIt(arr, searchKey) { 
    return arr.filter(function (obj) { 
     return obj.name.search(searchKey) != -1; 
    }); 
} 

Answer 3

あなたは、配列を反復処理するためにforEachを使用することができ、その後、for..in各オブジェクトを反復します。関数の先頭に配列を宣言し、配列内に一致するものを押し込んで返します。

function findMatches(arr, searchString){ 
    const matches = []; 

    arr.forEach((obj) => { 
    for (const key in obj) { 
     if (obj[key].includes(searchString)){ 
     matches.push(obj[key]); 
     } 
    } 
    }); 

    return matches; 
} 

const arr = [ 
    {name: 'bent', town: 'kansas'}, 
    {name:'benny', town:'vegas'} 
]; 

console.log(findMatches(arr, "b")); 
// => ["bent", "benny"] 

console.log(findMatches(arr, "benn")); 
// => ["benny"] 

Answer 4

より最適化されたソリューションは、言葉事前に初期名/町を抽出することになります。次に、各keyupイベントで、その文字列内を検索します。

RegExp対象とString.match()機能を備えたソリューション：

var input = document.getElementById("getCoins"), 
 
    arr = [{name: 'bent', town: 'kansas'},{ name:'benny', town:'vegas'}], 
 
    item_str = arr.map((o) => Object.values(o).join(' ')).join(' '); 
 

 
input.addEventListener("keyup", function(e){ 
 
    var pat = new RegExp('\\w*'+e.target.value+'\\w*', 'gi'); 
 
    console.log(item_str.match(pat)); 
 
});

<form> 
 
    <input id="getCoins" type="text" name="getCoins" placeholder=""> 
 
</form>