Фильтр поиска в массиве

Question

var klas = ['Nick Arts', 'Thijs Assmann', 'Rick Bats', 'Kim Cobben', 'Richard van Dartel', 'Dennis van Empel', 'Luuk van Gennip', 'Florent Guichard', 'Mahamed Hassan', 'Stijn Hendriks', 'Dirk van Herpen', 'Daniël Kartotaroeno', 'Tony van Klink', 'Stephan Klomp', 'Twan Korthout', 'Max Lenssen', 'Aron van der Linden', 'Aron de Looijer', 'Anil Manbodh', 'Sietse Manders', 'Ben Moerkens', 'Sven van Mourik', 'Teun Salters', 'Sven Slijkoord', 'Daan Soeten', 'Joey van Straalen', 'Koen van Veen', 'Maxim Westbroek']; 
<label>Zoek</label><input type="text" name=”zoek”> 

Привет, мне нужно создать фильтр поиска с этим массивом. Если я набираю «van» в поисковом фильтре, мне нужен вывод массива со всем «фургоном» в нем.

Я уже пытаюсь более половины наших, но не могу найти его, работает только первая буква.

Это то, что у меня уже есть, но я могу найти его только с первой буквой.

function arrayzoek() { 
    document.getElementById('stopwatch').innerHTML = ''; 
    var woord = document.getElementById('woordInput').value; 
    var woord = woord.toUpperCase(); 
    var woord2 = woord.toLowerCase(); 

    for (var i = 0; i < klas.length; i++) { 
     if (woord == klas[i].charAt(0)) { 
      document.getElementById('stopwatch').innerHTML += klas[i] + '<br />'; 
     } 
    } 
} 

Спасибо.

Answer 1

Используйте string.indexof, чтобы проверить подстроку внутри строки.

function arrayzoek() { 
    var woord = document.getElementById('woordInput').value.toLowerCase(); 

    var results = klas.filter(function (x) { 
     return x.toLowerCase().indexOf(woord) > -1; 
    }); 

    document.getElementById('stopwatch').innerHTML = results.join('<br />'); 
} 

Answer 2

что-то вроде этого возвратит массив со всеми данными, которые содержат слово, которое вы хотите найти.

var search[]; 
    var woord = document.getElementById('woordInput').value; 
    for (var i = 0; i < klas.length; i++) { 
     if(i.indexOf(woord)!=-1) 
     { 
      search.push(i); 
     } 
    } 

Answer 3

var klas = ['Nick Arts', 'Thijs Assmann', 'Rick Bats', 'Kim Cobben', 'Richard van Dartel', 'Dennis van Empel', 'Luuk van Gennip', 'Florent Guichard', 'Mahamed Hassan', 'Stijn Hendriks', 'Dirk van Herpen', 'Daniël Kartotaroeno', 'Tony van Klink', 'Stephan Klomp', 'Twan Korthout', 'Max Lenssen', 'Aron van der Linden', 'Aron de Looijer', 'Anil Manbodh', 'Sietse Manders', 'Ben Moerkens', 'Sven van Mourik', 'Teun Salters', 'Sven Slijkoord', 'Daan Soeten', 'Joey van Straalen', 'Koen van Veen', 'Maxim Westbroek']; 
 

 
document.getElementById("txtZoek").addEventListener("keyup", arrayZoek, false); 
 

 
function arrayZoek() { 
 
    var inputWord = document.getElementById("txtZoek").value; 
 
    document.getElementById("stopwatch").innerHTML = ""; 
 
    if (inputWord !== "") { 
 
    for (var i = 0; i < klas.length; i++) { 
 
     if (klas[i].indexOf(inputWord) >= 0) { 
 
     document.getElementById("stopwatch").innerHTML += klas[i] + "<br/>"; 
 
     } 
 
    } 
 
    } else { 
 
    document.getElementById("stopwatch").innerHTML = ""; 
 
    } 
 
}

label { 
 
    margin-right: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>Zoek</label> 
 
<input type="text" id="txtZoek" /> 
 
<br/> 
 
<span id="stopwatch"></span>

Редактировать
Изменено его простой код Javascript

Answer 4

Это решение:

var klas = ['Nick Arts', 'Thijs Assmann', 'Rick Bats', 'Kim Cobben', 'Richard van Dartel', 'Dennis van Empel', 'Luuk van Gennip', 'Florent Guichard', 'Mahamed Hassan', 'Stijn Hendriks', 'Dirk van Herpen', 'Daniël Kartotaroeno', 'Tony van Klink', 'Stephan Klomp', 'Twan Korthout', 'Max Lenssen', 'Aron van der Linden', 'Aron de Looijer', 'Anil Manbodh', 'Sietse Manders', 'Ben Moerkens', 'Sven van Mourik', 'Teun Salters', 'Sven Slijkoord', 'Daan Soeten', 'Joey van Straalen', 'Koen van Veen', 'Maxim Westbroek']; 

var woord = document.getElementById('woordInput').value; 
var results = arrayzoek(woord, klas); 
document.getElementById('stopwatch').innerHTML = results.join('<br />'); 

function arrayzoek(input, data) { 
    var re = new RegExp(input, 'gi'); 
    var result = data.filter(function(item) { 
     return re.test(item); 
    }); 
    return result; 
} 

I т использует filter, regexp и join, которые очень полезны и мощные JavaScript активов ...

Он также разделяет манипуляцию DOM из чистого яваскрипта функции, что приводит к более последовательной программной архитектуре.

К сожалению, я не знаю, голландский язык, поэтому переменные и имена функций, вероятно, улучшаемый :)

Answer 5

var filteredArr = [],i,temp, regExp = /van/i; 
    temp= klas[i]; 

for(i =0;i<klas.length;i++){ 
    if(Array.isArray(temp) && regExp.test(temp)){ 
     filteredArr.push(temp) 
    } 
} 

alert(filteredArr) 

Answer 6

Попробуйте это. обратите внимание, что я использовал JQuery

$(function() { 
 
    var klas = ['Nick Arts', 'Thijs Assmann', 'Rick Bats', 'Kim Cobben', 'Richard van Dartel', 'Dennis van Empel', 'Luuk van Gennip', 'Florent Guichard', 'Mahamed Hassan', 'Stijn Hendriks', 'Dirk van Herpen', 'Daniël Kartotaroeno', 'Tony van Klink', 'Stephan Klomp', 'Twan Korthout', 'Max Lenssen', 'Aron van der Linden', 'Aron de Looijer', 'Anil Manbodh', 'Sietse Manders', 'Ben Moerkens', 'Sven van Mourik', 'Teun Salters', 'Sven Slijkoord', 'Daan Soeten', 'Joey van Straalen', 'Koen van Veen', 'Maxim Westbroek']; 
 
    $("#tags").autocomplete({ 
 
    source: klas 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div class="ui-widget"> 
 
    <label for="tags">Zoek:</label> 
 
    <input id="tags"> 
 
</div>

Answer 7

Вот хорошая библиотека, которая поможет вам для поиска и управления массивами

http://underscorejs.org/

find_.find (список, предикат, [context]) Псевдоним: обнаружение Просматривает каждое значение в списке, возвращая первое, которое передает правду тест (предикат) или неопределенный, если значение не проходит тест. Функция возвращает, как только находит приемлемый элемент, а не пересекает весь список.

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; }); 
=> 2 

следуя вашему примеру:

var klas = ['Nick Arts', 'Thijs Assmann', 'Rick Bats', 'Kim Cobben', 'Richard van Dartel', 'Dennis van Empel', 'Luuk van Gennip', 'Florent Guichard', 'Mahamed Hassan', 'Stijn Hendriks', 'Dirk van Herpen', 'Daniël Kartotaroeno', 'Tony van Klink', 'Stephan Klomp', 'Twan Korthout', 'Max Lenssen', 'Aron van der Linden', 'Aron de Looijer', 'Anil Manbodh', 'Sietse Manders', 'Ben Moerkens', 'Sven van Mourik', 'Teun Salters', 'Sven Slijkoord', 'Daan Soeten', 'Joey van Straalen', 'Koen van Veen', 'Maxim Westbroek']; 



    return _.contains(klas, 'van');