Javascript/jQuery compare input value to array

Question

I'm relatively new to javascript and jquery. Right now I have a list of words in a txt file. I store this list in an array, and I want to compare the contents of that array to some user input. If there's a match, that specific word should be displayed.

I also use Jasny Bootstrap to perform some typeahead functions to predict which words the user would like to search for.

In the current stage, my function finds matches on the first input character. When using more characters the function returns that no match has been found. Why is that?

Here's my HTML:

<div class="container">

  <div class="appwrapper">
    <div class="content">
        <h3>OpenTaal Woordenboek</h3>
        <p>Voer uw zoekopdracht in:<p>
        <p><input name="searchinput" id="searchinput" data-provide="typeahead" type="text" placeholder="Zoeken...">
    <p class="dict"></p>
    </div>
  </div>

</div> <!-- /container -->

And here's the jQuery:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>

<script type="text/javascript">
var data;
var myArray = [];
var txtFile = new XMLHttpRequest();
        txtFile.open("GET", "OpenTaal-210G-basis-gekeurd.txt", true);
        txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
            if (txtFile.status === 200) {  // Makes sure it's found the file.
            allText = txtFile.responseText;
            data = txtFile.responseText.split("\n"); // Will separate each line into an array
            myArray = [data];
        } //"\r\n" 
    }
}
//console.write(data);

searchinput.onkeypress = function() {
//alert("The function is working!");
var formInput = document.getElementById("searchinput").value;

   if (myArray == formInput) {
   alert("There's a match!");
   $('.dict').append('<div class="result">' + myArray + '</div>')
   } else {
      alert("No match has been found..");
   }
 };

You're intentionally comparing the entire myArray to a single formInput value? — Blazemonger
– Blazemonger, Commented Sep 23, 2013 at 17:27
I think I have to iterate over the myArray to search for a match. But I don't quite know how to do this in javascript — Forza
– Forza, Commented Sep 23, 2013 at 17:28
just a tip... if you use jquery you're better of replacing your XMLHttpRequest with jquery code (ie $.ajax) — kasper Taeymans
– kasper Taeymans, Commented Sep 23, 2013 at 17:28

Snake Eyes · Accepted Answer · 2013-09-23 18:18:38Z

3

You didn't use jquery, just native javascript.

After your script reading file, just do:

$(searchinput).on("keypress", function() {
   if ($.inArray(formInput,myArray) > -1) {
      alert("There's a match!");
   }
});

UPDATE

$(searchinput).on("blur", function() {
   if ($.inArray(formInput,myArray) > -1) {
      alert("There's a match!");
   }
});

edited Sep 23, 2013 at 18:18

answered Sep 23, 2013 at 17:30

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Forza Over a year ago

I do have a problem now that it's adding matches to my paragraph for every character I type. Do you know how I can avoid that?

Forza Over a year ago

That is the purpose of it. I have to make any matches visible :)

Snake Eyes Over a year ago

Maybe you don't need keypress, just use "blur" event which is reached when the focus of "input" is lost.

Blazemonger Over a year ago

$.inArray returns 0 if the first array element matches, which evaluates as false. It returns -1 if there are no matches. You need to test if ($.inArray(formInput,myArray)>=0)

Blazemonger · Accepted Answer · 2013-09-23 17:28:35Z

2

You need to search the entire array, not just compare it to the value:

if ($.inArray(formInput,myArray)>=0) { // returns -1 if no match
   alert("There's a match!");

http://api.jquery.com/jQuery.inArray/

answered Sep 23, 2013 at 17:28

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

Gurminder Singh · Accepted Answer · 2013-09-23 17:35:25Z

0

Loop through the array and match the input value with array elements like :

   for(var i in myArray) {
       var arrayElement = myArray[i];
       if (arrayElement == formInput) {
            //Do your stuff
       }
   }

answered Sep 23, 2013 at 17:35

Gurminder Singh

1,75516 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery compare input value to array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related