2

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

可以通过->(根据this )自动完成多个属性，例如 (name,city,country )

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 文件中进行一些更改？

4

2 回答 2

3

您需要返回一个hash

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

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

你也可以阅读这篇文章，看看它是否有帮助。

于 2015-02-21T08:43:24.663 回答
2

基于上面的答案，这个 和这个
什么工作如下所示：

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

变量 store: 现在包含所有数据。
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"
于 2015-02-22T13:20:21.490 回答