title: How to do instant search with mongoosastic + AJAX?
body: <p>I have configured mongoosastic successfully, I tried searching and it is working fine, but when it comes to front-end I'm not really sure on how to achieve this, I experimented with a lot of ways but couldn't come up with a good solution.</p>
  
  <p>Here's the code.</p>
  
  <pre><code>// For the Search API
      router.post('/api/search/', function(req, res, next) {
        Job.search(
          {
            query_string:
            { query: req.body.search }
          } , function(err, results) {
              if (err) return next(err);
              res.json(results);
          });
      });
  </code></pre>
  
  <p>So whenever I search something that is related to 'engineer', I will get a json data </p>
  
  <p><a href="https://i.stack.imgur.com/5UpDW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5UpDW.png" alt="enter image description here"></a></p>
  
  <p>So the backend does working perfectly.</p>
  
  <p>However when it comes to jquery and ajax I keep getting bad request</p>
  
  <p>The logic: whenever something is inserted then post that and find that result.</p>
  
  <p>Here's the frontend jquery code.</p>
  
  <pre><code>  $('#search').keyup(function() {
  
      var search_term = $(this).val();
  
  
      $.ajax({
        type: "POST",
        url: "/api/search",
        success: function(){
          $('search_results').html(search_term);
        },
        error: function(data){
          alert('Error', data);
        }
      });
  
    });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" class="form-control input-lg" id="search" name="search" placeholder="Search for part-time..." /&gt;
  
  
  
   &lt;div id="search_results"&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>How do I insert the json results to <code>search_results</code>?</p>