How to check for a value in array with Javascript with text input

Question

I would like to check for a value in an array using a text input. If the value is present in the array, I want to show the user a text.

My question: Is there a way to don't use jQuery?

Here is what I got up to now: 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>

In other words you want to convert your jQuery code to pure Javascript? — hindmost
– hindmost, Commented Apr 30, 2015 at 13:31
sorted.indexOf(recherche.toLowerCase()) will be a Number, num1 > num2 will be a Bool, so resultat is a Bool, so you're doing $(bool)? — Paul S.
– Paul S., Commented Apr 30, 2015 at 13:34
Yes I would like to use only javascript. @paulS Maybe there are improvements to make to my code concerning var resultat. — Lucien Dubois
– Lucien Dubois, Commented Apr 30, 2015 at 13:37

coderLMN · Accepted Answer · 2015-04-30 14:17:01Z

Sure you can avoid jQuery, which is also written in pure JavaScript.

Since you only need to check if input text matches any string in the predefined array, you can bypass the sort operation and go directly to comparison.

There are some event handler existed in pure JS, like onkeyup, which is pretty handy for input retrieval.

Fade in and out effect can be rendered with CSS transition and opacity, as shown in the <style> part. The JS function assign different classNames to the div according to the match result.

The follow code has been tested in Chrome browser and should meet your requirement.

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

The <form> tag in this demo, actually, is not necessary. You can just keep <input> and <div> tags and get the same result.

Great! I will add some lines to doesn't take care of the case.

Paul S. · Accepted Answer · 2015-04-30 13:47:19Z

I've re-written the jQuery lines of your code in vanilla JavaScript. Please see the comments for what is happening. // ... means I've skipped ahead

function node_show(node) { // $(node).fadeIn, without fade :(
    node.style.display = 'block';
}

function node_hide(node) { // $(node).fadeOut, without fade :(
    node.style.display = 'none';
}

window.addEventListener('load', function (e) { // $(document).ready
    document.getElementById('filter') // $("#filter")
        .addEventListener('keyup', function (e) { // .keyup
            var recherche = this.value; // $(this).val();
            // ...
                node_show(document.getElementById('resultat'));
            // ...
                node_hide(document.getElementById('resultat'));
            // ...
        });
});

Paullaster Okoth · Accepted Answer · 2021-07-01 18:20:02Z

0

Well I believe I got you right and this how I interpreted your question. So I will just write few lines of codes how i would have gone about that.

window.addEventListerner("DOMContentLoaded", (e)=>{
 let itemsArr = ["subaru", "rangerover", "bmw", "voxwagen"];
 let userInput = document.querySelector("input[type=text]").value;
 if(itemsArr.includes(userInput)){
 console.log ("my text to user")
 }
});

<html>
<body>
<form>
 <input type="text">
</form>
</body>
<script src="myscript.js">
</html>

answered Jul 1, 2021 at 18:20

Paullaster Okoth

958 bronze badges

Collectives™ on Stack Overflow

How to check for a value in array with Javascript with text input

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related