searchkick - 具有多个属性的自动完成

Posted 2023-03-22

【中文标题】searchkick - 具有多个属性的自动完成

【英文标题】：searchkick - Autocomplete with multiple attributes

【发布时间】：2015-04-22 23:24:04

【问题描述】：

使用给定here 的单个属性进行搜索时，自动完成功能正常。

可以通过->（根据this）实现具有多个属性（例如（名称、城市、国家）的自动完成功能）

def autocomplete
     Doctor.search(params[:query], autocomplete: true, limit: 10).map|doctor| doctor.slice(:name, :city, :country) 
end

但是，这会导致自动完成下拉菜单/建议显示“未定义”。

我使用的是提前输入：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>

在代码中它被引用：

$( function () 
   $("#search").typeahead(
    name: "doctor",
    remote: "/doctors/autocomplete?query=%QUERY"
  );


);

由于返回的数据不止一组，是否需要对 typeahead js 文件进行一些更改？

【问题讨论】：

你试过我的解决方案了吗？

@SharvyAhmed 我目前正在关注您的博客文章，并对其本身提出了疑问...

使用 TypeaheadJS+BloodhoundJS 捆绑包 (twitter.github.io/typeahead.js/releases/latest/…)

添加 Bloodhound 后，我在为单个属性实现自动完成时也遇到了一些问题。在此处添加了详细信息：***.com/questions/28654125/…

【参考方案1】：

您需要返回一个hash

doctors 控制器中的 autocomplete 操作需要如下所示：

def autocomplete
  render json: Doctor.search(params[:query], autocomplete: true, limit: 10).map do |doctor|  name: doctor.name, city: doctor.city, country: doctor.country 
  end
end

在您的预输入选项中添加displayKey：

$( function () 
   $("#search").typeahead(
    name: "doctor",
    displayKey: 'name',
    remote: "/doctors/autocomplete?query=%QUERY"
  );
);

您也可以阅读this 文章，看看是否有帮助。

【讨论】：

现在也可以搜索多个属性。已在下面发布了我的答案。请查看是否有任何改进。

【参考方案2】：

基于上述答案和this和this 如下所示：

def autocomplete
    names = Doctor.search(params[:query], fields: [name: :text_start], limit: 10).map |Doctor| store: doctor.name, value: doctor.id
    collegenames = Doctor.search(params[:query], fields: [collegename: :text_start], limit: 10).map |Doctor| store: doctor.collegename, value: doctor.id
    render json: (names + collegenames)

end

变量存储：现在包含所有数据。 Javascript：

var ready;
ready = function() 
    console.log("dfdf")
    var numbers = new Bloodhound(
      datumTokenizer: function(d) 
            console.log(d);
            return Bloodhound.tokenizers.whitespace('value');
        ,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 
            url:"/doctors/autocomplete?query=%QUERY"
        


        );

        // initialize the bloodhound suggestion engine

        var promise = numbers.initialize();

        promise
        .done(function()  console.log('success!'); )
        .fail(function()  console.log('err!'); );

        // instantiate the typeahead UI
        $('.typeahead').typeahead(null, 
          displayKey: 'store',
          source: numbers.ttAdapter()
        );


$(document).ready(ready);
$(document).on('page:load', ready);

自动完成在这两个字段上都很好用，但是现在我在写一个像这样的 url 时得到一个空数组

http://localhost:3000/doctors/autocomplete?query="a"

【讨论】：

My comment here 可能会解决您的问题。