current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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..");
   }
 };

share|improve this question
 
You're intentionally comparing the entire myArray to a single formInput value? –  Blazemonger Sep 23 '13 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 Sep 23 '13 at 17:28
2  
just a tip... if you use jquery you're better of replacing your XMLHttpRequest with jquery code (ie $.ajax) –  kasper Taeymans Sep 23 '13 at 17:28
 
Thx for the tip kasper. Will have a look at that :) –  Forza Sep 23 '13 at 17:44
add comment

3 Answers

up vote 0 down vote accepted

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!");
   }
});
share|improve this answer
 
Well thank you :) This works like a charm! –  Forza Sep 23 '13 at 17:38
 
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 Sep 23 '13 at 17:55
 
Just remove code which add matches from your paragraphs –  Snake Eyes Sep 23 '13 at 18:02
 
That is the purpose of it. I have to make any matches visible :) –  Forza Sep 23 '13 at 18:02
 
Maybe you don't need keypress, just use "blur" event which is reached when the focus of "input" is lost. –  Snake Eyes Sep 23 '13 at 18:07
show 2 more comments
up vote 2 down vote

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/

share|improve this answer
 
Thx for mentioning inArray. That's a good one to remember :) –  Forza Sep 23 '13 at 17:38
add comment
up vote 0 down vote

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
       }
   }
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.