配列を動的に配列を作成するjavascript

Question

配列からリストを作成する必要があります。 私は入力値を渡し、私が見つけたすべての一致でリストを再作成します。一致がない場合は "結果なし"というメッセージを表示する必要があります。

• inputValueで= "ジャは、" ジャックとジェイク
• inputValueで= "のJakは" ジェイク
• inputValueで= "foo" が "いいえ結果"

var arr = [{"name": "Jack"}, {"name": "Jake"}]; 
 
var txtName = document.querySelector("#txtName"); 
 

 
txtName.addEventListener('keyup', function(e){ 
 
    arr.forEach(function(item){ 
 
    if(item.name.toLowerCase().indexOf(txtName.value) > -1){ 
 
     myList.innerHTML += 
 
     `<li>${item.name}</li>` 
 
     return 
 
     }else{ 
 
     myList.innerHTML = `<li>No results </li>` 
 
     } 
 
    }); 
 
});

<input type="text" id="txtName"> 
 
<ul id="myList"></ul>

を返し返し返します

Answer 1

あなただけのループの最後で出力「いいえ結果」に決定する必要があります。ループの任意の反復でこれを出力するのが適切かどうかを知ることができないので、既に出力されている可能性のある良い結果が消去されます。

：あなたの代わりにすべての項目の「結果なし」を与えないために、空の入力をしたい場合は、その後に matchesの定義を変更

var arr = [{"name": "Jack"}, {"name": "Jake"}]; 
 
var txtName = document.querySelector("#txtName"); 
 

 
txtName.addEventListener('keyup', function(e){ 
 
    var lowText = txtName.value.toLowerCase(); 
 
    var matches = arr.filter(function(item){ 
 
     return item.name.toLowerCase().indexOf(lowText) > -1; 
 
    }).map(function (item) { 
 
     return `<li>${item.name}</li>`; 
 
    }).join(''); 
 
    myList.innerHTML = matches || `<li>No results </li>`; 
 
});

<input type="text" id="txtName"> 
 
<ul id="myList"></ul>

：ここ

が修正バージョンです

var matches = lowText.length && arr.filter(// ...etc 

Answer 2

.innerHTMLに必要以上に書き込まないでください。それはDOMの更新を引き起こし、あなたがそうする必要があるときにのみ行うべきです。代わりに、文字列を構築し、文字列が完成したら挿入します。あなたのケースでは、ループのある特定の反復で一致が見つからない場合は、「結果がありません」と書かれていますが、他の繰り返しがある可能性があります。単純なフラグ変数を使用して、一致が見つかったかどうかを追跡することができます。

クリア結果、新しいデータを書き込むと、あなたはケースを下げるために1つの文字列を変換しようとしている場合、あなたはまた、あなたがそのようにも他を変換する必要はありませreturn.forEach()

からできることを知っていますあなたは低い方から低い方へと比較しています。

keyupからinputに変更して、キーボードイベント（モバイルデバイスなど）をサポートしていないデバイスでも動作するようにします。

var arr = [{name: "Jack"}, {name: "Jake"}]; 
 
var txtName = document.getElementById("txtName"); 
 

 
txtName.addEventListener('input', function(e){ 
 
    myList.innerHTML = ""; // Clear out old results 
 
    
 
    var output = "";   // This will be the results 
 
    var foundItems = false;  // "Flag" that keeps track of whether matches were found 
 
    
 
    // You can't return from a .forEach loop 
 
    arr.forEach(function(item){ 
 

 
    // Compare lower case against lower case 
 
    if(item.name.toLowerCase().indexOf(txtName.value.toLowerCase()) > -1){ 
 
     output += `<li>${item.name}</li>` 
 
     foundItems = true; // Set flag 
 
    } 
 
    }); 
 
    
 
    // Check flag 
 
    if(foundItems){ 
 
    myList.innerHTML = output; // Flag is up, use found data 
 
    } else { 
 
    // Flag is still down, no results 
 
    myList.innerHTML = `<li>No results </li>`; 
 
    } 
 
});

<input type="text" id="txtName"> 
 
<ul id="myList"></ul>

Answer 3

結果のコンテナを作成することができます（スニペットでは、divという名前のmyResultsです）。次に再配置しますテキストが入力されたときのコンテナ

マッチングの際にどのような機能が必要かわかりません。 がJackから入力され、Jakeが両方ともaを含む場合、現在一致します。ただし、何も見つからない場合は、その結果が表示されます。

この方法では、何かがボックスに入力されるたびに新しいリストを作成する機能があります。テキストボックスの値がリストの項目としてリストに追加された場合は、名前にテキストボックスの値が含まれているかどうかが判別されます。関数の最後に、childElementCountプロパティを使用して、リスト項目が追加されたかどうかを判断します。一致しなかった場合、一致するものは何もわかっていないので、テキストをNo Results Foundに設定します。

var arr = [{ 
 
    "name": "Jack" 
 
}, { 
 
    "name": "Jake" 
 
}]; 
 
var txtName = document.querySelector("#txtName"), 
 
    results = document.querySelector("#myResults"); 
 

 
txtName.addEventListener('keyup', function(e) { 
 
    results.innerHTML = ""; 
 
    results.appendChild(createList(this.value)); 
 
}); 
 

 
function createList(value) { 
 
    let create = (tag, props = {}) => Object.assign(document.createElement(tag), props), 
 
    appendTo = (p, c) => { 
 
     if (p) p.appendChild(c); 
 
     return p; 
 
    }, 
 

 
    list = create("ul"); 
 
    list.id = "myList"; 
 
    for (let value_obj of arr) { 
 
    if (value_obj.name.toLowerCase().indexOf(value.toLowerCase()) > -1) { 
 
     appendTo(list, create("li", { 
 
     textContent: value_obj.name 
 
     })); 
 
    } 
 
    } 
 
    if(list.childElementCount == 0) list.textContent = "No Results Found"; 
 
    return list; 
 
}

<input type="text" id="txtName"> 
 
<div id="myResults"></div>

Answer 4

あなたはクリア/イベントごとにあなたのリストのHTMLを書き換えるようにしたいです。次に、結果を一致するセットに絞り込みます。一致するものが見つからない場合はイベントを終了し、結果がない項目を追加すると、空の結果に対する処理が停止します。一致した場合にのみ反復するので、空のチェックの後にそのビットを保存してください。

const arr = [{"name": "Jack"}, {"name": "Jake"}]; 
 
const txtName = document.querySelector("#txtName"); 
 
const myList = document.querySelector('#myList'); 
 

 
const findName = e => { 
 
    myList.innerHTML = ""; 
 
    const matches = arr.filter(val => val.name.toLowerCase().indexOf(e.target.value) > -1); 
 

 
    if (matches.length === 0 || e.target.value == '') { 
 
    myList.innerHTML = '<li>No Results</li>'; 
 
    return; 
 
    } 
 
    matches.forEach(val => { 
 
    let current = document.createElement('li') 
 
    current.textContent = val.name; 
 
    myList.appendChild(current); 
 
    }); 
 
} 
 

 
txtName.addEventListener('keyup', findName);

<input type="text" id="txtName"> 
 
<ul id="myList"></ul>

Answer 5

<input type="text" id="txtName" onkeyup="filter(this.value)"> 
<ul id="myList"></ul> 

<script type="text/javascript"> 
var arr = [{ 
    "name": "Jack" 
}, { 
    "name": "Jake" 
}]; 
var txtName = document.querySelector("#txtName"); 

var filter = function(val) { 
    var regex = new RegExp("^" + val, "i"); 
    var result = arr.filter(function(obj) { 
    return obj.name.search(regex) > -1; 
    }); 

    if (result.length == 0) { 
    myList.innerHTML = 'No results'; 
    } else { 
    myList.innerHTML = ''; 
    result.forEach(function(item) { 
     myList.innerHTML += `<li>${item.name}</li>`; 
    }); 
    } 
} 
</script>