针对数组的搜索/过滤器

问题描述：

我正在为数组进行搜索。我有一个输入[文本]，例如，我把'禁令'，然后我需要所有以'禁令'开头的结果，例如香蕉，香蕉奶昔，香蕉（油炸）等。针对数组的搜索/过滤器

我会去做这个吗？我试过了，但每次尝试都不准确。我试过的是以下。

我有什么：

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

你需要做一个自动完成？ – Kashkain

首先使用onkeyup事件而不是onkeydown。 – Lalit

也许这也有帮助：https：//*.com/q/29154877/1447675 –

答

我想你应该改用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>

非常感谢，这是完美的。 –

答

按照说明操作，您可以在数组中使用正则表达式过滤器。

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

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

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

答

使用jQuery UI autocomplete此任务可以很容易实现：

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

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

针对数组的搜索/过滤器

相关推荐