搜索/筛选数组

Question

我正在为一个数组做一个搜索函数。我有一个输入[文本]，例如，我把'ban'，然后我需要所有以'ban'开头的结果显示出来，例如香蕉，香蕉奶昔，香蕉（油炸），等等。

我该怎么做呢？我试过了，但每次都不准确。我试过的在下面。

var inputBox = document.getElementById('ingredient');
var ingredienten = ["Appel", "Aardbei", "Aardappelen", "Banaan", "Bananen", "Banana"]

inputBox.onkeydown = function(evt) {
      $("#autocomplete").empty();

      // INSERT CODE FOR SEARCH FUNCTION


}

我有一个非常接近，但当我键入“ban”时，它出现了“aardbei”。这显然是错误的。在这里，也许我忽略了什么？

var inputBox = document.getElementById('ingredient');
var ingredienten = ["banaan", "bananen", "baan", "banana", "baaanana"];

inputBox.onkeydown = function(evt) {
    $("#autocomplete").empty();

    var input, filter, a, i;
    input = document.getElementById("myInput");
    filter = inputBox.value.toUpperCase();
    for (i = 0; i < ingredienten.length; i++) {
        a = ingredienten[i];
        if (a.toUpperCase().indexOf(filter) > -1) {
        //console.log(a);
        $("#autocomplete").append("<li>" + a + "</li>");
        } else {
        }
    }

Answer 1

我认为应该使用keyup事件，并且可以使用regex和项数组的filter函数：

var inputBox = document.getElementById('ingredient');
var ingredienten = ["Appel", "Aardbei", "Aardappelen", "Banaan", "Bananen", "Banana"]

inputBox.onkeyup = function(evt) {
    $("#autocomplete").empty();

    var query = $('#ingredient').val();

    // escape regex
    query = query.replace(
      /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"
    );
    var queryRegExp = new RegExp('^' + query, 'i');
    
    var results = ingredienten.filter(function(item) {
        return queryRegExp.test(item);
    });
   
    results.forEach(function(item) {
        $("#autocomplete").append("<li>" + item + "</li>");
    });
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="ingredient" />
<div id="autocomplete"></div>