Question

我正在为数组创建搜索功能。我有一个输入[文本]，例如我把'禁止'，然后我需要所有结果以'禁令'开头，例如香蕉，香蕉奶昔，香蕉（油炸）等。

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

我有什么：

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

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

      // INSERT CODE FOR SEARCH FUNCTION


}

我有一个非常接近，但是当我输入'禁令'时，它提出了'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事件，并且可以在项目数组上使用正则表达式和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>

Answer 2

使用jQuery UI autocomplete可以非常轻松地完成此任务：

＆＃13;

$('#ingredient').autocomplete({
    source: ["Appel", "Aardbei", "Aardappelen", "Banaan", "Bananen", "Banana"]
});

＆＃13;

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>



<input id="ingredient">

＆＃13;

Answer 3

根据说明，您可以在阵列上使用正则表达式过滤器。

const results = ingredienten.filter(item => item.match(/^ban/)); //add i at the end to ignore case

这将迭代数组并返回与正则表达式“以''''开头匹配的所有结果。

你也可以做一个0-2子串匹配=='禁止'，但这更加手动。

搜索/过滤数组

3 个答案: