0

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?

4

2 回答 2

1

尝试附加keyup事件处理程序

这将在用户释放密钥时触发。

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

如果您想在准备好的文档上触发相同的事件，那么您可以在声明之后链接事件。

$(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
于 2013-07-15T23:48:13.123 回答
0

或者，您可以在用户按下回车键（即输入一些文本后）时触发事件，如下所示：

$(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
于 2013-07-16T00:02:53.720 回答