如何在即时搜索中停止重复? jQuery + AJAX + Mongoosastic

问题描述

当前，我正在使用的即时搜索效果很好，但是，只有一个问题.

Currently The instant search that I'm using is working perfectly but , there is only one problem.

每当我输入化学"字样时，它将显示针对

Whenever I type "Chemical", it will show the query for

Chemical Engineer
Chemical Entrepreneur
Checmical People

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

But let say I decided to add "Engineer" after "Chemical", then the result will be

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

这是代码

router.js

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

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 -Val建议的-XGET localhost:9200/products/_mapping后

after using curl -XGET localhost:9200/products/_mapping suggested by 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"}}}}}}

推荐答案

我认为您应该清除以前的结果.始终按下一个键，您将获得文本字段的值，并且该值将通过ajax发送.如果您编写Chemical，您将得到一些响应，这些响应将附加到您的html上，所有这些响应都与Chemical匹配，因此，当您编写Chemical Engineering时，您需要清理之前的附加标签，因此我认为这就足够了:

I think you should clean previus results.Always you press a key you get the value of textfield and that value will be sent through ajax.If you write Chemical you will get some responses which will be appended to your html, all those responses matched with Chemical so when you write Chemical Engineering you need to clean up previus appended tags so I think this could be enough:

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

PS: The sentence var search_term = $(this).val(); is not necessary keyup function gives you through parameter the event with the element

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

这篇关于如何在即时搜索中停止重复? jQuery + AJAX + Mongoosastic的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！