gpt4 book ai didi

javascript - 应用程序内的 Rails 搜索选项

转载 作者:行者123 更新时间:2023-11-28 00:47:37 24 4
gpt4 key购买 nike

我是 Rails 新手。我已经完成了一个小应用程序,用于创建联系人及其详细信息。现在,在该应用程序中我想添加以下功能

  1. 添加搜索框
  2. 当您在搜索框中键入内容时,与搜索结果匹配的相关联系人应作为建议显示在该搜索框的正下方。
  3. 点击搜索结果中的联系人应重定向至该联系页面。

我无法得到任何想法,所以请有人帮忙。

最佳答案

您尝试过这个自动完成搜索框吗?

http://jqueryui.com/autocomplete/

并根据您的要求修改该自动完成功能。

javascript 将像这样工作

var source = '' ;
$( "input#autocomplete" ).keyup(function() {
$.get( "/contacts-json?q="+$(this).val(), function( data ) {
source = data ;
});
});

var NoResultsLabel = "No Results";
$("input#autocomplete").autocomplete({
source : function(request, response) {
var results = $.ui.autocomplete.filter(source, request.term);

if (!results.length) {
results = [NoResultsLabel];
}

response(results);
},
select : function(event, ui) {
event.preventDefault();
if (ui.item.label === NoResultsLabel) {
event.preventDefault();
} else {
$("input#autocomplete").val(ui.item.label);
window.location.href = ui.item.value; //give redirect url to contact details page
}
},
messages : {
results : function(event, ui) {

}
}
});

我在 View 文件中有一个文本框,

<input id="autocomplete" class="typeahead" type="text" placeholder="Search">

在 Controller 中,

def contacts_json
@program = Contact.all
@formatted_contacts = []
@searched_contacts = []
Contact.where("title LIKE ?", "#{params[:q]}%" ).each do |contact|
@searched_contacts << {value: contact.to_param, label: contact.title}
end
@formatted_contacts = @searched_contacts.uniq {|e| e[:value]} //to get unique contact
@formatted_contacts = @formatted_contacts.to_json
render json: @formatted_contacts
end

在路由文件中,

  get 'contacts-json' => 'contacts#contacts_json', as: :all_contacts_json

关于javascript - 应用程序内的 Rails 搜索选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27182032/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com