我想使用文本输入检查数组中的值。如果该值存在于数组中，我想向用户显示文本。
我的问题: 有没有办法不使用 jQuery？
这是我现在所做的: http://jsfiddle.net/t8r5eLxb/
$(document).ready(function(){
var recherche ="";
var liste = ["Ariat", "Wrangler", "turtles"];
var sorted = [];
for (var i = 0; i < liste.length; i++) {
sorted.push(liste[i].toLowerCase());
}
sorted.sort();
$("#filter").keyup(function(){
var recherche = $(this).val();
// Résultat
var resultat = (sorted.indexOf(recherche.toLowerCase()) > -1);
if( $(resultat).text().search(new RegExp(filter, "i")) < 0 ){
$('#resultat').fadeIn();
}
else{
$('#resultat').fadeOut();
}
});
});
<form id="live-search" action="" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
</fieldset>
</form>
<div id="resultat">Vrai</div>
最佳答案
当然你可以避免使用 jQuery，它也是用纯 JavaScript 编写的。
由于您只需要检查输入文本是否与预定义数组中的任何字符串匹配，因此您可以绕过排序操作并直接进行比较。
纯JS中存在一些事件处理程序，例如onkeyup ，这对于输入检索非常方便。
淡入淡出效果可以通过CSS过渡和不透明度来渲染，如<style>所示部分。 JS函数根据匹配结果为div分配不同的className。
以下代码已在Chrome浏览器中测试，应该满足您的要求。
<!DOCTYPE html>
<html>
<head>
<style>
.fadeOut {opacity: 0; color:red;}
.fadeIn {opacity: 1; color:green;}
#resultat {
font-size: 20px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}
</style>
</head>
<body>
<form id="live-search" action="" method="post">
<fieldset>
<input type="text" id="filter" value="">
</fieldset>
</form>
<div id="resultat" class="fadeOut">Vrai</div>
<script>
function test(){
var liste = ["Ariat", "Wrangler", "turtles"];
var filter = document.getElementById('filter');
var resultat = document.getElementById('resultat');
filter.onkeyup = function(event){
var recherche = event.target.value;
var match = false;
for(var i in liste){
if(liste[i] == recherche) match = true;
}
if(match){
resultat.className = 'fadeIn';
}
else{
resultat.className = 'fadeOut';
}
};
};
test();
</script>
</body>
</html>
<form>实际上，这个演示中的标签并不是必需的。你可以保留<input>和<div>标签并得到相同的结果。
关于javascript - 如何使用带有文本输入的 Javascript 检查数组中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29969062/