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

Question

Currently, the instant search I'm using works fine, but there is only one problem.

Whenever I type “Chemical,” it will show a query for

Chemical Engineer Chemical Entrepreneur Checmical People 

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

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

Here is the code

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

How to stop duplication?

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

Answer 1

I think you should clear the results of the premium. You always press a key, you get the value of the text field, and this value will be sent via ajax. If you write Chemical , you will get answers that will be added to your html, all those answers that correspond to Chemical , so when you write Chemical Engineering , you need to clear the tags with the addition of previus, so I think this might 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: sentence var search_term = $(this).val(); no keyup required function gives you via event parameter with element

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