Make Ajax Get Request when a key is typed into a search box
<p>I am trying to create a real time search box in my Django Application. The general idea is that when a key is pressed in the search field, it should send the get request to my server, and on success, the data should append to my search-result p tag. However, for some reason, I am appending my entire HTML content. I want to only append the information sent inside the search box. </p>

<p>This is what I have so far. </p>

<p>Html</p>

<pre><code> &lt;form method="get" action="{% url 'sell' %}" class="search_form center-block"&gt;
                    &lt;!--{% csrf_token %}--&gt;
                    &lt;div class="input-group search_option"&gt;
                      &lt;input type="text" id="searchBox" class="search_field form-control" name="q" placeholder="Search for..."&gt;
                        &lt;span class="input-group-btn"&gt;
                            &lt;input id="search" class="search_submit btn btn-default" onclick="myFunction()" type="submit" value="Search"&gt;
                        &lt;/span&gt;
           &lt;/div&gt;&lt;!-- /input-group --&gt;
&lt;/form&gt;
</code></pre>

<p>Script</p>

<pre><code>$(document).ready(function(){
          $('.search_field').keyup(function(){
              $.ajax({
                  url: "{% url 'sell' %}",
                  type: "GET",
                  cache: false,
                  data: { 'search_text' : $('.search_field').val() },
                  success: function(data){
                    $('#search-results').append(data);
                  }
              });
          });
        });
</code></pre>

<p>I believe data is where I am trying to get the value off of the search_field input, but for some reason. This isn't working. </p>

<p>Thanks for the help in advance </p>