mongoosastic + AJAXでインスタント検索を行うには？

Question

私はmongoosasticをうまく構成しました。私は検索を試みましたがうまくいきましたが、フロントエンドになると、これを達成する方法がわかりませんでした。私は多くの方法で実験しましたが、良い解決策で。

ここにコードがあります。

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

だから私は「エンジニア」に関連している何かを検索したときに、私は、バックエンドが完璧に働いてんJSONデータ

を取得します。何かが挿入されるたびに、その投稿し、その結果を見つける：それはjQueryとAJAXに来るとき

は、しかし、私は悪い要求

ロジックを得続けます。

ここにフロントエンドのjqueryコードがあります。

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

    }); 

私はsearch_resultsにJSONの結果を挿入するにはどうすればよいHTML

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



<div id="search_results"> 


    </div> 

？

Answer 1

何をする必要がある

あなたは私たちは（成功時にここに戻って取得するJSONを使用し、バックエンド

にAjaxを介して、それを送信した入力値を取得し、すべてのキーストロークに

1. です表示：それ

）divの中に「タイトル給与は、」だから、あなたのフロントエンドのコードは次のようになります。

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

私はこれと非常に似た何かに取り組んでいます。まず、あなたがあなたの最初のAJAXリクエストのパラメータが欠落しているように見えるので、あなたのノードサーバは、任意の情報を取得していない：

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

}); 

これらの問題をデバッグするとき、私はにconsole.logを（使用することは非常に参考にされています）

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

あなたの場合、あなたが見ることができる方法ので、ログは、非常に明確に未定義報告したり、あなたが期待している正しい文字列になります。私のノードサーバにあなたはそれへのアクセス権を持っている場合、それは実際に取得されるデータを表示するにはパラメータは正しいです

lsoはノードサーバーのアドレスとポートをチェックしたい（健全性チェックと同じ）。私は私のサーバーが別のポート

上にあるという理由だけで、私の質問の前で

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

を配置する必要があり、私のAjaxリクエストはこちらをご参考のためのjQueryのポスト機能に関するいくつかの詳細です：

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

これは役に立ちます。