Làm thế nào để thực hiện tìm kiếm tức thì với mongoosastic + AJAX?

Question

Tôi đã cấu hình mongoosastic thành công, tôi đã thử tìm kiếm và nó hoạt động tốt, nhưng khi nói đến front-end tôi không thực sự chắc chắn về cách để đạt được điều này, tôi đã thử nghiệm với rất nhiều cách nhưng không thể đi lên với một giải pháp tốt.

Đây là mã.

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

Vì vậy, bất cứ khi nào tôi tìm kiếm một cái gì đó có liên quan đến 'kỹ sư', tôi sẽ nhận được một dữ liệu json

Vì vậy, các phụ trợ không làm việc một cách hoàn hảo.

Tuy nhiên khi nói đến jquery và ajax tôi tiếp tục nhận được yêu cầu xấu

Logic: bất cứ khi nào một cái gì đó được chèn sau đó gửi đó và tìm kết quả đó.

Đây là mã jquery giao diện người dùng.

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

Làm thế nào để chèn kết quả json để search_results?

Answer 1

Những gì bạn cần làm là

1. trên mỗi đột quỵ quan trọng, có giá trị đầu vào
2. gửi nó qua Ajax để backend
3. bạn sử dụng JSON bạn trở lại khi thành công (ở đây chúng ta chỉ hiển thị "title: lương" nó trong div)

Vì vậy, mã front-end của bạn sẽ trông như thế này:

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

Tôi đang làm việc trên một cái gì đó rất giống với điều này ngay bây giờ. Đầu tiên, có vẻ như bạn đang thiếu các thông số trong yêu cầu ajax ban đầu của bạn, vì vậy máy chủ nút của bạn không nhận được bất kỳ thông tin:

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

}); 

Khi gỡ lỗi những vấn đề này nó đã rất hữu ích cho tôi để sử dụng console.log() trong máy chủ nút của tôi nếu bạn có quyền truy cập vào nó để xem những gì dữ liệu mà nó thực sự là nhận được:

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

Nhật ký sẽ báo cáo rất rõ ràng undefined hoặc chuỗi chính xác mà bạn đang mong đợi, vì vậy cách mà bạn có thể thấy nếu bạn thông số chính xác

Bạn có thể lso muốn kiểm tra địa chỉ máy chủ và cổng của bạn (giống như kiểm tra sanity).Nếu có yêu cầu ajax của tôi, tôi có phải đặt

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

trước truy vấn của tôi chỉ đơn giản là vì máy chủ của tôi là trên một cổng khác

Dưới đây là một số chi tiết thông tin về jQuery bài chức năng để bạn tham khảo:

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

Hy vọng điều này sẽ hữu ích!