应用程序内的Rails搜索选项

时间:2014-11-28 04:43:56

标签: javascript ruby-on-rails

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

  1. 添加搜索框
  2. 当您在搜索框中输入内容时,与搜索结果匹配的相关联系人应显示在该搜索框的正下方作为建议。
  3. 点击搜索结果中的联系人应重定向到该联系人页面。
  4. 我无法得到任何想法,所以请一些帮助。

2 个答案:

答案 0 :(得分:1)

您是否尝试过此自动填充搜索框?

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) {

        }
    }
});

我在视图文件中有一个文本框

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

在控制器中,

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

答案 1 :(得分:0)

您是否尝试过rails3-jquery-autocomplete gem,这应该很容易实现。