Различные результаты после ввода - JavaScript

Question

При вводе ввода coup, cou, а затем coup, результаты разные. Кто-нибудь знает, что может быть причиной этого?

Вот jsfiddle для моего кода: jsfiddle.net/xbuppd1r/43

var data = {"cards":[{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":89,"Name":"anathar","CardType":0,"CostAP":7,"Life":7,"Attack":4,"MovementPoint":2,"Families":[70],"IsToken":false,"Rarity":3,"GodType":0,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Anathar","DescFR":"<b>CONTRE COUP :</b>\nTant qu'il est en vie, Anathar prend le contrôle de son adversaire.","NameEN":"Anathar","DescEN":"<b>COUNTERATTACK:</b>\nSo long as he is alive, Anathar takes control of his opponent.","NameES":"Anathar","DescES":"<b>VENGANZA:</b>\nMientras esté vivo, Anathar toma el control de su contrincante."}},{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":137,"Name":"appel_a_la_baston","CardType":1,"CostAP":7,"Life":0,"Attack":0,"MovementPoint":0,"Families":[1],"IsToken":false,"Rarity":3,"GodType":1,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Appel à la Baston","DescFR":"Piochez portée 4 cartes.\r\nGardez les invocations et défaussez les autres.","NameEN":"Call to Brawl","DescEN":"Draw 4 cards.\r\nKeep the Summons and discard any others.","NameES":"Toque de Refriega","DescES":"Robas 4 cartas.\r\nConservas las invocaciones y descartas las otras."}},{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":20,"Name":"sphincter_cell","CardType":0,"CostAP":5,"Life":4,"Attack":4,"MovementPoint":3,"Families":[19],"IsToken":false,"Rarity":2,"GodType":0,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Sphincter Cell","DescFR":"<b>COUP DE GRÂCE :</b>\nRécupérez le dernier Rat parti dans votre défausse.\r","NameEN":"Sphincter Cell","DescEN":"<b>FINAL BLOW:</b>\nRetrieve the last Rat that went to your discard pile.\n","NameES":"Sfinter Cell","DescES":"<b>GOLPE DE GRACIA:</b>\nRecuperas la última rata enviada a tu descarte.\n"} },{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":20,"Name":"sphincter_cell","CardType":0,"CostAP":5,"Life":4,"Attack":4,"MovementPoint":3,"Families":[19],"IsToken":false,"Rarity":2,"GodType":0,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Sphincter Cell","DescFR":"<b>COUP DE GRÂCE :</b>\nRécupérez le dernier Rat parti dans votre défausse.\r","NameEN":"Sphincter Cell","DescEN":"<b>FINAL BLOW:</b>\nRetrieve the last Rat that went to your discard pile.\n","NameES":"Sfinter Cell","DescES":"<b>GOLPE DE GRACIA:</b>\nRecuperas la última rata enviada a tu descarte.\n"} },{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":20,"Name":"sphincter_cell","CardType":0,"CostAP":5,"Life":4,"Attack":4,"MovementPoint":3,"Families":[19],"IsToken":false,"Rarity":2,"GodType":0,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Sphincter Cell","DescFR":"<b>COUP DE GRÂCE :</b>\nRécupérez le dernier Rat parti dans votre défausse.\r","NameEN":"Sphincter Cell","DescEN":"<b>FINAL BLOW:</b>\nRetrieve the last Rat that went to your discard pile.\n","NameES":"Sfinter Cell","DescES":"<b>GOLPE DE GRACIA:</b>\nRecuperas la última rata enviada a tu descarte.\n"} },{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+SimpleData, Assembly-CSharp-Editor","Id":20,"Name":"sphincter_cell","CardType":0,"CostAP":5,"Life":4,"Attack":4,"MovementPoint":3,"Families":[19],"IsToken":false,"Rarity":2,"GodType":0,"Extension":1,"LinkedCards":[],"Texts":{"$type":"Assets.Code.Editor.Helpers.SimpleCardDataExporter+TextData, Assembly-CSharp-Editor","NameFR":"Sphincter Cell","DescFR":"<b>COUP DE GRÂCE :</b>\nRécupérez le dernier Rat parti dans votre défausse.\r","NameEN":"Sphincter Cell","DescEN":"<b>FINAL BLOW:</b>\nRetrieve the last Rat that went to your discard pile.\n","NameES":"Sfinter Cell","DescES":"<b>GOLPE DE GRACIA:</b>\nRecuperas la última rata enviada a tu descarte.\n"} }]} 

$("#search").keyup(function(){ 
    // Minimally, you need to reset the results array here. 
    results = []; 

    var InputVal = $('#search').val(); 
    var myExp = new RegExp(InputVal, "i"); 

    if(InputVal.length > 0) { 
     var results = data.cards.filter(function(obj){ 
      for(var key in obj) 
       if (String(obj.Texts.DescFR).toLowerCase().match(myExp)) return true; 
       if (String(obj.Name).toLowerCase().match(myExp)) return true; 

     return false; 
    }); 

var newHTML = []; 
for (var i = 0; i < results.length; i++) { 
    newHTML.push(results[i].Name);   
} 

console.log(JSON.stringify(newHTML)); 
// our variable holding starting index of this "page" 
var index = 0; 

// display our initial list 
displayNext(); 

$("#next").click(function(event) { 
    event.preventDefault(); 

     // display next elements 
     displayNext(); 
}); 


function displayNext() { 
    // get the list element 
    var list = $('#list'); 

    // get index stored as a data on the list, if it doesn't exist then assign 0 
    var index = list.data('index') % newHTML.length || 0; 

    // save next index - for next call 
    list.data('index', index + 16); 

    // 1) get 20 elements from array - starting from index, using Array.slice() 
    // 2) map them to array of li strings 
    // 3) join the array into a single string and set it as a HTML content of list 

    list.html($.map(newHTML.slice(index, index + 16), function(val){ 
     console.log(val); 
     return '<div class="col-md-2">' + val + '</div>'; 
     }).join('')); 
    } 
} 
}); 

Я не знаю, почему она производит различные результаты при вводе в моей записи, это очень странно.

Заранее спасибо.

Answer 1

Ваш массив результатов не обновляется всякий раз, когда вы вводите новый поиск.

Я заметил, что во второй раз, когда вы входите в «переворот», вы получаете те же результаты, что и первоначальный ввод «co».

Я добавил эту строку в ваше событие keyup, и теперь, когда я набираю «coup», я получаю тот же результат. Ваша окончательная реализация будет включать в себя обеспечение того, чтобы для каждого нового поиска вы либо обновляли этот массив, либо удаляли из него результаты, которые больше не действительны всякий раз, когда ввод изменяется (так, при активации в вашем случае).

results = [];