如何在即时搜索中停止重复？ jquery + AJAX + 猫鼬

Question

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

每当我键入 "Chemical" 时，它都会显示

的查询

Chemical Engineer
Chemical Entrepreneur
Checmical People

但是假设我决定在 "Chemical" 之后添加 "Engineer"，那么结果将是

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

这是代码

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

如何停止重复？

在使用 curl -XGET localhost:9200/products/_mapping 之后，由 Val

建议

{"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"}}}}}}

Answer 1

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

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/

如何在即时搜索中停止重复？ jquery + AJAX + 猫鼬

How to stop duplication on instant search? jquery + AJAX + mongoosastic

jquery

ajax

node.js

mongoosastic