[英]searchkick - Autocomplete with multiple attributes
使用此处给出的单个属性进行搜索时,自动填充功能正常。
可以通过 - >(根据此 )自动完成具有多个属性(例如(姓名,城市,国家/地区))
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文件中是否需要进行一些更改?
您需要返回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
选项中添加displayKey
:
$( function () {
$("#search").typeahead({
name: "doctor",
displayKey: 'name',
remote: "/doctors/autocomplete?query=%QUERY"
});
});
您还可以阅读此文章,看看是否有帮助。
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);
自动完成功能在这两个领域都很有用,但是现在我在编写一个类似的网址时得到一个空数组
http://localhost:3000/doctors/autocomplete?query="a"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.