如何使用mongoosastic + AJAX进行即时search?

我已经成功地configuration了mongoosastic,我试着search,它工作正常,但是当涉及到前端我不确定如何实现这一点,我尝试了很多方法,但不能拿出一个好的解决办法

这是代码。

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

所以每当我search与“工程师”有关的东西时,我都会得到一个json数据

在这里输入图像描述

所以后端工作完美。

但是,当涉及到jQuery和Ajax我不断收到不好的要求

逻辑:每当插入东西,然后张贴,并find该结果。

这里是前端的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); } }); }); 

HTML

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

如何插入json结果到search_results

你需要做的是

  1. 在每个关键笔划上,获取input值
  2. 通过Ajax发送给你的后端
  3. 使用成功的JSON(这里我们只是在div中显示“title:salary”)

所以你的前端代码看起来像这样:

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

我现在正在处理与此类似的事情。 首先,它看起来像你最初的ajax请求中缺less参数,所以你的节点服务器没有得到任何信息:

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

在debugging这些问题时,如果您有权访问节点服务器中的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); }); }); 

日志将非常清楚地报告未定义或正确的string,这样你就可以看到你的参数是否正确

你也可能想检查你的节点服务器地址和端口(只是一个完整性检查)。 对于我的阿贾克斯请求,我必须把

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

在我的查询之前,只是因为我的服务器在不同的端口上

以下是关于jQuery post函数的更多信息供您参考:

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

希望这可以帮助!