.val is not giving me the value of my element

Question

I am working with a reddit API. I have a search box on my page and I am trying to set it up so that if one were to type virtually anything it would return the top 10 news stories related to the word or phrase they typed.

 <script>
    $(document).ready(function () {

       //reddit API URL
       //var URL =  "http://www.reddit.com/r/subreddits/search.json?q=Xbox";

       var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
       var searchQueryText = $('#search').val(); //getSearchQueryText();

       $.getJSON(SEARCH_URL, {
          q: searchQueryText,
          limit: 10
       }).done(function (data) {
           $.each(data.data.children, function (i, item) {
             $("<p>").text(item.data.title).appendTo("#images");
           });
       }).fail(function (data) {
           alert("Something went wrong");
       });

    }); //end ready
 </script>

<div id="images">
<h1>Reddit Data:</h1>

<p>
    <label>Search</label>
    <input type = "text" id = "search" value = "" />
</p>

If I change the var SearchQueryText to a specific word than the API works fine. However since I changed it to the $('#search').val(); it no longer works. I put an alert() to test for the value and the pop-up is blank. So I think the problem is it doesn't detect the word when I type it. So I wrote a simple .mouseenter function and still nothing. Any ideas?

Answer 1

Try attaching a keyup event handler

This will fire when ever the user releases the key.

$('#search').keyup(function() {
    console.log(this.value)
}).change();

If you want to fire the same on document ready then you can just chain the event after the declaration.

$(document).ready(function () {

    $('#search').keyup(function () {
        //reddit API URL
        //var URL =  "http://www.reddit.com/r/subreddits/search.json?q=Xbox";

        var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
        var searchQueryText = this.value;  // or  $(this).val(()

        $.getJSON(SEARCH_URL, {
            q: searchQueryText,
            limit: 10
        }).done(function (data) {
            $.each(data.data.children, function (i, item) {
                $("<p>").text(item.data.title).appendTo("#images");

            });
        }).fail(function (data) {
            alert("Something went wrong");
        });
    }).keyup();
}); //end ready

Answer 2

Alternatively, you could fire the event whenever the user presses the enter key (i.e. after inputting some text) like so:

$(document).ready(function () {
  $('#search').keypress(function(e) {
     if(e.which == 13) {
       // Enter key pressed
       e.preventDefault();
       var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
       var searchQueryText = $('#search').val(); //getSearchQueryText();
       console.log(searchQueryText);

       $.getJSON(SEARCH_URL, {
          q: searchQueryText,
          limit: 10
       }).done(function (data) {
          $.each(data.data.children, function (i, item) {
          $("<p>").text(item.data.title).appendTo("#images");
          });
       }).fail(function (data) {
         alert("Something went wrong");
       });   
     }
  }); // End keypress handler
}); // End ready