How to do an instant search using mongoosastic + AJAX?

Question

I successfully configured mongoosastic, I tried searching and it works fine, but when it comes to the interface, I’m not quite sure how to achieve this, I experimented with a lot of ways, but couldn’t come up with a good solution.

Here is the 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); }); }); 

So whenever I look for something that is related to an “engineer”, I get json data

Thus, the backend works just fine.

However, when it comes to jquery and ajax, I get a bad request all the time

Logic: whenever something is inserted, post it and find this result.

Here's the jQuery code for the interface.

  $('#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); } }); }); 

HTML

 <input type="text" class="form-control input-lg" id="search" name="search" placeholder="Search for part-time..." /> <div id="search_results"> </div> 

How to insert json results in search_results ?

Answer 1

What you need to do is

• each time you press a key, enter a value
• send it through Ajax to your server
• use JSON, which you will return to success (here we just show "name: salary" in the div)

So your external code will look like this:

 $('#search').keyup(function() { // 1. grab the search term from the input field var search_term = $(this).val(); // 2. send it to your back-end via ajax in the body $.ajax({ method: "POST", url: "/api/search", // <-- your back-end endpoint data: "search=" + search_term // <-- what you're sending dataType: "json", // <-- what you're expecting back success: function(json){ // <-- do something with the JSON you get // 3. parse the JSON and display the results var res = json.hits.hits.map(function(hit) { return hit._source.title + ": " + hit._source.salary; }); $('search_results').html(res.join("<br />")); }, error: function(data){ alert('Error', data); } }); }); 

Answer 2

I am working on something very similar to this right now. Firstly, it looks like you are missing parameters in your original ajax request, so your node server is not receiving any information:

 $('#search').keyup(function() { //Perform the ajax request var search_term = $(this).val(); $.ajax({ type: "POST", url: "/api/search", data: {"search": search_term}, success: function(data) { //Loop over all the data and output it, appending data to element //with a line break for(var i=0; i < data.hits.length; i++) $('search_results').append(data.hits[i]._source.title+'<br />'); }, error: function(data){ alert('Error', data); } }); }); 

When debugging these problems, it was very useful for me to use console.log () on my node server, if you have access to it, to see what data it actually gets:

 // For the Search API router.post('/api/search/', function(req, res, next) { console.log("%j", req.body.search) Job.search( { query_string: { query: req.body.search } } , function(err, results) { if (err) return next(err); res.json(results); }); }); 

The log will clearly indicate undefined or the correct line that you expect, so you can make sure your parameters are correct.

You can also check the server address and node port (just like a health check). For my ajax requests I need to put

 url: "http://localhost:9200/api/search" 

before my requests simply because my server is on a different port

Here's more info on the jQuery post function for the link:

http://api.jquery.com/jquery.post/

Hope this helps!