在数组中搜索过滤器

时间:2016-04-15 07:00:20

标签: javascript

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

嗨,我需要用这个数组创建一个搜索过滤器。 如果我输入&#39; van&#39;在搜索过滤器中,我需要所有&#39; van&#39;在它。

我已经尝试了一半以上,但无法找到它,只有第一个字母有效。

这是我已经拥有的,但我只能用第一个字母找到它。

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 />';
        }
    }
}

感谢。

7 个答案:

答案 0 :(得分:4)

使用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 />');
}

答案 1 :(得分:0)

这样的东西会返回一个数组,其中包含你想要找到的单词的所有数据。

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

答案 2 :(得分:0)

&#13;
&#13;
Right
&#13;
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 = "";
  }
}
&#13;
label {
  margin-right: 10px;
}
&#13;
&#13;
&#13;

修改
将其更改为普通的Javascript代码

答案 3 :(得分:0)

这是一个解决方案:

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;
}

它使用filterregexpjoin,它们是非常实用且功能强大的javascript资源......

它还将DOM操作与纯javascript函数分开,从而产生更一致的程序体系结构。

抱歉,我不懂荷兰语,所以变量和函数名称可能是可以改进的:)

答案 4 :(得分:0)

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)

答案 5 :(得分:0)

试试这个。请注意我使用了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>

答案 6 :(得分:0)

这是一个很好的库,可以帮助您搜索和管理数组

http://underscorejs.org/

  

find_.find(list,predicate,[context])别名:detect look through   列表中的每个值,返回传递真相的第一个值   test(谓词),如果没有值通过测试,则为undefined。该   函数一找到可接受的元素就返回,并且   不会遍历整个列表。

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');