Come eseguire la ricerca istantanea con mongoosastic + AJAX?

Question

Ho configurato mongoosastic con successo, ho provato a cercare e funziona bene, ma quando si tratta di front-end non sono molto sicuro su come raggiungerlo, ho sperimentato molti modi ma non ho potuto con una buona soluzione.

Ecco il codice.

// 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); 
     }); 
    }); 

Così ogni volta che cerco qualcosa che è legato a 'ingegnere', mi metterò a dati JSON

Così il backend non perfettamente funzionante.

Tuttavia quando si tratta di jquery e ajax Continuo a ricevere male richiesta

La logica: ogni volta che viene inserita una cosa poi post che e trovare quel risultato.

Ecco il codice jquery del frontend.

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

Come faccio a inserire i risultati JSON per search_results?

Answer 1

Quello che dovete fare è

1. su ogni colpo chiave, ottenere il valore di ingresso
2. inviarlo tramite Ajax al backend
3. utilizzare il JSON torni in caso di successo (qui abbiamo appena Display "title: salario" nel div)

Così il vostro codice di front-end sarebbe simile a questa:

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

Sto lavorando a qualcosa di molto simile a questo adesso. In primo luogo, sembra che non trovi il parametri nella richiesta Ajax iniziale, in modo che il server del nodo non riceve alcuna informazione:

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

}); 

Quando il debug di questi problemi è stato molto utile per me di utilizzare console.log() nel mio server del nodo se si ha accesso ad esso per visualizzare i dati che è in realtà sempre:

// 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); 
    }); 
}); 

il registro sarà molto chiaramente segnalare definita o la stringa corretta che ci si aspetta, in modo che modo si può vedere se il vostro i parametri sono corretti

È possibile che un Voglio anche controllare l'indirizzo e la porta del server del nodo (proprio come un controllo di integrità).Per le mie richieste Ajax devo mettere

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

davanti mie domande, semplicemente perché il mio server è su una porta diversa

Ecco qualche informazione in più sulla funzione posta jQuery per il vostro riferimento:

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

Spero che questo aiuti!