如何停止即时搜索的重复？ jquery + AJAX + mongoosastic答案

【问题标题】：How to stop duplication on instant search? jquery + AJAX + mongoosastic如何停止即时搜索的重复？ jquery + AJAX + mongoosastic
【发布时间】：2016-03-29 21:36:21
【问题描述】：

目前我使用的即时搜索运行良好，但是只有一个问题。

每当我输入“化学”时，它都会显示对

的查询

Chemical Engineer
Chemical Entrepreneur
Checmical People

但是假设我决定在“化学”之后添加“工程师”，那么结果将是

Chemical Engineer
Chemical Entrepreneur
Checmical People
Chemical Engineer
Chemical Entrepreneur
Checmical People

这是代码

路由器.js

router.post('/api/search/', function(req, res, next) {

  Product.search(
    {
      query_string:
      { query: req.body.search_term }
    } , function(err, results) {
        if (err) return next(err);
        res.json(results);
    });
});

custom.js

$('#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_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;
        });
        console.log(res);
        for (var i = 0; i < res.length; i++) {
          $('.testing').append('<li>' + res[i]._source.name + '</li>');
        }

      },
      error: function(data){
        alert('Error', data);
      }
    });
  });

如何停止重复？

使用 Val 建议的 curl -XGET localhost:9200/products/_mapping 后

{"products":{"mappings":{"product":{"properties":{"_id":{"type":"string"},"category":{"type":"string"},"description":{"type":"string"},"image":{"type":"string"},"name":{"type":"string"},"price":{"type":"double"},"sizes":{"type":"string"},"stocks":{"type":"double"}}}}}}

【问题讨论】：

你能用索引中的映射类型更新你的问题吗？ curl -XGET localhost:9200/products/_mapping。另外当你直接用这个查询 ES 时你会得到什么：curl -XGET localhost:9200/products/_search?q=Chemical%20Engineer&pretty
如果我理解正确，您将结果附加到testing 容器而不清除它。在success 回调中运行for 循环之前尝试执行$('.testing').html('')。
您在for 循环之前尝试过$('.testing').empty() 我认为清理旧的<li> 可以工作
@Val 只是想澄清一下，问题不在于弹性搜索本身，而在于 ajax 调用，因为每次我输入内容时，它都会不断触发 ajax 调用，并执行 Product。一遍又一遍地搜索
您拥有的代码不是我在回答中的代码，它是$('search_results').html(res.join("<br />"));，并且确实在每个响应中替换了整个 HTML。您可能已经使用了另一个答案中的代码，它使用了append。

标签： jquery ajax node.js mongoosastic

【解决方案1】：

我认为你应该清理以前的结果。总是你按下一个键，你会得到文本字段的值，该值将通过 ajax 发送。如果你写Chemical，你会得到一些响应，这些响应将附加到你的html中，所有这些响应都与Chemical匹配，所以当你写Chemical Engineering时，你需要清理之前附加的标签，所以我认为这可能就足够了：

custom.js

$('#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_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;
        });
        console.log(res);
        $('.testing').empty(); ///new line added
        for (var i = 0; i < res.length; i++) {
          $('.testing').append('<li>' + res[i]._source.name + '</li>');
        }

      },
      error: function(data){
        alert('Error', data);
      }
    });
  });

PS：语句var search_term = $(this).val(); 不是必需的keyup 函数给你通过参数event 和element

https://api.jquery.com/keyup/

【讨论】：