如何通过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);
      }
    });

  });

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 中？

- Jack Moscovi

Answer 1

您需要做的是：

1. 在每次按键时获取输入值
2. 通过Ajax将其发送到后端
3. 在成功接收JSON后使用它（这里我们只显示“标题：工资”在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);
    }
  });
});

- Val

---

假设我搜索“化学”，然后决定添加“工程师”，它会返回相同的数据两次，我该如何检查它是否是重复的？ - Jack Moscovi

我建议您为此创建一个新问题。 - Val

等一下，我会做！ - Jack Moscovi

这里是 http://stackoverflow.com/questions/34435877/how-to-stop-duplication-on-instant-search-jquery-ajax-mongoosastic - Jack Moscovi

看一下这个链接：http://stackoverflow.com/questions/34564625/how-to-solve-accessdeniedexception-in-elasticsearch - Jack Moscovi

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

日志将非常清楚地报告未定义或您期望的正确字符串，这样您就可以看到您的参数是否正确。

您可能还想检查您的节点服务器地址和端口（只是为了保持清醒）。对于我的ajax请求，我必须放置

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

因为我的服务器在不同的端口上，所以我的查询需要放在前面。

以下是有关jQuery post函数的更多信息，供您参考：

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

希望这有所帮助！

- medee88