Jak wykonać błyskawiczne wyszukiwanie za pomocą techniki mongoosastycznej + AJAX?

Question

Mam skonfigurowane mongoosastyczne z powodzeniem, próbowałem wyszukiwania i działa dobrze, ale jeśli chodzi o front-end, nie jestem naprawdę pewien, jak to osiągnąć, eksperymentowałem z wieloma sposobami, ale nie mogłem wymyślić z dobrym rozwiązaniem.

Oto kod.

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

Kiedykolwiek więc szukać czegoś, co jest związane z „inżynier”, dostanę danych JSON

Tak backend nie działa idealnie.

Jednak jeśli chodzi o jQuery i AJAX Wciąż dostaję złe żądanie

Logika: gdy coś jest włożona wtedy zakładać, że i znaleźć tego rezultatu.

Oto kod jquery frontendu.

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

Jak wstawić wyniki json do search_results?

Answer 1

Co trzeba zrobić, to

1. na każdym naciśnięciu klawisza, uzyskać wartość wejściową
2. wysłać go za pośrednictwem AJAX do backend
3. używać JSON wrócisz na sukces (tu właśnie wyświetlacz "tytuł: pensja" to w div)

Więc kod front-end będzie wyglądać następująco:

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

Pracuję nad czymś bardzo podobnym teraz. Po pierwsze, wygląda na to brakuje parametry w swoim pierwotnym wniosku ajax, więc serwer węzeł nie jest uzyskanie wszelkich informacji:

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

}); 

Gdy debugowanie te problemy to było bardzo pomocne dla mnie do korzystania console.log() w moim serwerze węzła, jeśli masz do niego dostęp, aby zobaczyć, jakie dane jest rzeczywiście coraz:

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

Rejestr będzie bardzo wyraźnie zgłaszać niezdefiniowany lub prawidłowy ciąg, który spodziewasz, więc w ten sposób można sprawdzić, czy parametry są prawidłowe

Możesz mieć Chcę również sprawdzić adres i port serwera węzła (tak jak sprawdzanie poprawności).Dla moich ajax wniosków muszę umieścić

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

przed moimi zapytaniami prostu dlatego mój serwer jest na innym porcie

Oto kilka informacji na temat funkcji postu jQuery dla odniesienia:

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

Mam nadzieję, że to pomoże!