如何使用mongoosastic + AJAX进行即时搜索？ [英] How to do instant search with mongoosastic + AJAX?

问题描述

我已经配置了mongoosastic成功，我尝试搜索，它的工作正常，但是谈到前端我不太确定如何实现这一点，我尝试了很多方法，但不能来有一个很好的解决方案。

这是代码。

  /对于搜索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数据。

p>



所以后端工作正常。

然而，当涉及到jquery和ajax我不断得到不好的请求

逻辑：每当有东西被插入，然后发布并找到该结果。

这是前端jQuery代码。

  $（'＃search'）。keyup（function（）{
 
 var search_term = $（this）.val（）; 
 
 
 $ .ajax {
 type：POST，
 url：/ api / search，
 success：function（）{
 $（'search_results'）。html（search_term） 
}，
错误：function（data）{
 alert（'Error'，data）; 
} 
}）; 
 
}）; 
  

HTML

 < input type =textclass =form-control input-lgid =searchname =searchplaceholder =搜索兼职.../> 
 
 
 
< div id =search_results> 
 
 
< / div> 
  

如何将json结果插入到 search_results ？

解决方案

您需要做的是

1. 每个关键笔划，获取输入值


2. 通过Ajax发送到您的后端


3. 使用您返回的JSON成功（这里我们在div中显示title：salary）

所以你的前端代码如下所示：

  $（'＃search'）。keyup（function（）{
 
 // 1。从输入字段获取搜索项
 var search_term = $（this）.val（）; 
 
 // 2.通过身体中的ajax将其发送到您的后端
 $ .ajax（{
 method：POST，
 url：/ api / search，//<  - 你的后端端点
 data：search = + search_term //<  - 你要发送的
 dataType：json，//<  - 你期待的是什么
 success：function（json）{ //<  - 做一些JSON你得到
 // 3.解析JSON并显示结果
 var res = json.hits.hits.map（function（hit）{
 return hit._source.title +：+ hit._source.salary; 
}）; 
 $（'search_results'）。html（res.join（< br />））; 
}，
错误：function（data）{
 alert（'Error'，data）; 
} 
}）; 
}）; 
  

I have configured mongoosastic successfully, I tried searching and it is working fine, but when it comes to front-end I'm not really sure on how to achieve this, I experimented with a lot of ways but couldn't come up with a good solution.

Here's the code.

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

So whenever I search something that is related to 'engineer', I will get a json data

So the backend does working perfectly.

However when it comes to jquery and ajax I keep getting bad request

The logic: whenever something is inserted then post that and find that result.

Here's the frontend jquery code.

  $('#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>

How do I insert the json results to search_results?

解决方案

What you need to do is

1. on every key stroke, get the input value
2. send it via Ajax to your backend
3. use the JSON you get back upon success (here we just display "title: salary" it in the div)

So your front-end code would look like this:

$('#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);
    }
  });
});

这篇关于如何使用mongoosastic + AJAX进行即时搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！