title: Display tweets from twitter API from user input
body: <p>I'm a beginner at javascript/jquery and completely new to API's and I'm wondering if anyone could help me with something</p>
  
  <p>What I'm trying to achieve is to have a user enter a keyword/phrase into a textbox, they click search and the page returns a list of people who have that word in their tweet.</p>
  
  <p>I have so far been able to display results from a hard-coded keyword (which I got from a website) but when trying to change it I am getting nothing back.</p>
  
  <p>Here is the working one with hard code</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $.getJSON('http://search.twitter.com/search.json?q=earthquake&amp;lang=en&amp;callback=?', function (data) {
              var data = data.results;
              var html = "&lt;ul&gt;";
              for (var i = 0; i &lt; data.length; i++) {
                  html += "&lt;li&gt;&lt;a href='http://twitter.com/" + data[i].from_user + "'&gt;@"
                            + data[i].from_user + "&lt;/a&gt;: " + data[i].text + "&lt;/li&gt;";
              }
              html += "&lt;/ul&gt;"
              $('.content').html(html);
          });
      });
  &lt;/script&gt;
  
  &lt;h2&gt;Twitter&lt;/h2&gt;
  &lt;div class="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the code I'm working on now</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          var button= document.getElementById('searchTwitter');
          button.onclick= function(){
              var text = document.getElementById('search').value;
          }
          var baseUrl = "http://search.twitter.com/search";
  
  
          var query = document.getElementById('&lt;%=searchTwitter.ClientID%&gt;').value;
  
          $(document).ready(function () {
  
  
              $.ajax({
  
                  url: baseUrl + '&amp;text' + '&amp;lang=en&amp;callback=?',
  
                  dataType: "jsonp",
  
                  success: showResults
              });
          });
              function showResults(data) {
  
                  var data = data.results;
                  var html = "&lt;ul&gt;";
                  for (var i = 0; i &lt; data.length; i++) {
                      html += "&lt;li&gt;&lt;a href='http://twitter.com/" + data[i].from_user + "'&gt;@"
                                + data[i].from_user + "&lt;/a&gt;: " + data[i].text + "&lt;/li&gt;";
                  }
                  html += "&lt;/ul&gt;"
                  $('.content').html(html);
  
          }
  
  
  
      &lt;/script&gt;
  
      &lt;asp:TextBox ID="search" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:Button ID="searchTwitter" runat="server" Text="Button" /&gt;
  </code></pre>
  
  <p>Any help would be much appreciated as I have been trying to find a way to do this for days.</p>
  
  <p>thanks a lot</p>