Ruby on Rails 특정 웹 페이지 또는 특정 웹 페이지의 텍스트 필드 또는 목록보다는 동작 표시

Question

건물에있는 웹 사이트는 루비 레일에 있으며 농업 장비에 관한 것입니다. 내가 사용하는 입력 텍스트 필드에 키워드를 포함하는 모든 항목을 나열하는 일반 검색 페이지를 만들었습니다.

내가 계획하고있는 것은 부트 스트랩 자동 완성 기능이있는 텍스트 필드를 갖는 것입니다. 텍스트 입력란에는 입력에 따라 옵션이 표시되며 단일 옵션을 선택하면 결과를 나열하는 대신 특정 항목 세부 정보 페이지 즉, 페이지 표시로 연결해야합니다.

텍스트 필드 값을 사용하여 항목 표시 페이지로 직접 연결하는 방법에 대한 도움이 필요합니다.

어떻게 할 수 있습니까? 당신은 기본적으로 백엔드에 keyup에 요청을 보낼 ajax를 사용 livesearch 기능 (PHP, Rails 등) 우리는 '

의 일종을 생성하고자 할 것 같은 의견 또한

Answer 1

, 그것은 소리

-

이 here (상단 검색)과 같은 수행 뭔가를했습니다 이 아닌 이해 응답을

을 보내 keyup

컨트롤러 작업을 처리 할 수 ​​

자바 스크립트

• 특정 ajax 경로 :

  이 일을하는 방법은 3 배입니다 정확히 뭘 원하는지 바라지 만 올바른 방향으로 안내해줍니다.

  ---

  경로

  #config/routes.rb 
  resources :controller do 
      collection do 
       get "search(/:query)" #-> domain.com/controler/search/your_query 
      end 
  end 
  

  컨트롤러

  #app/controllers/your_controller.rb 
  class YourController < ApplicationController 
      respond_to :json, :js, :html 
  
      def search 
       @response = Model.where value: params[:query] 
       respond_with @response 
      end 
  end 
  

  JS

  #app/assets/javascripts/jquery.livesearch.js 
  // Author: Ryan Heath 
  // http://rpheath.com 
  
  (function($) { 
      $.searchbox = {} 
  
      $.extend(true, $.searchbox, { 
      settings: { 
       url: 'search', 
       param: 'search', 
       dom_id: '#livesearch', 
       minChars: 2, 
       loading_css: '#livesearch_loading', 
       del_id: '#livesearch_del' 
      }, 
  
      loading: function() { 
       $($.searchbox.settings.loading_css).show() 
      }, 
  
      idle: function() { 
       $($.searchbox.settings.loading_css).hide() 
      }, 
  
      start: function() { 
       $.searchbox.loading() 
       $(document).trigger('before.searchbox') 
      }, 
  
      stop: function() { 
       $.searchbox.idle() 
       $(document).trigger('after.searchbox') 
      }, 
  
      kill: function() { 
       $($.searchbox.settings.dom_id).fadeOut(50) 
       $($.searchbox.settings.dom_id).html('') 
       $($.searchbox.settings.del_id).fadeOut(100) 
      }, 
  
      reset: function() { 
       $($.searchbox.settings.dom_id).html('') 
       $($.searchbox.settings.dom_id).fadeOut(50) 
       $('#SearchSearch').val('') 
       $($.searchbox.settings.del_id).fadeOut(100) 
      }, 
  
      process: function(terms) { 
  
       if(/\S/.test(terms)) { 
        $.ajax({ 
          type: 'GET', 
          url: $.searchbox.settings.url, 
          data: {search: terms.trim()}, 
          complete: function(data) { 
           $($.searchbox.settings.del_id).fadeIn(50) 
           $($.searchbox.settings.dom_id).html(data.responseText) 
  
           if (!$($.searchbox.settings.dom_id).is(':empty')) { 
            $($.searchbox.settings.dom_id).fadeIn(100) 
           } 
  
           $.searchbox.stop(); 
          } 
         }); 
        return false; 
       }else{ 
        $.searchbox.kill(); 
       } 
      } 
      }); 
  
  
  
      $.fn.searchbox = function(config) { 
       var settings = $.extend(true, $.searchbox.settings, config || {}) 
  
       $(document).trigger('init.searchbox') 
       $.searchbox.idle() 
  
       return this.each(function() { 
        var $input = $(this) 
  
        $input 
        .keyup(function() { 
         if ($input.val() != this.previousValue) { 
  
          if(/\S/.test($input.val().trim()) && $input.val().trim().length > $.searchbox.settings.minChars){ 
           $.searchbox.start() 
           $.searchbox.process($input.val()) 
          }else{ 
           $.searchbox.kill() 
          } 
  
          this.previousValue = $input.val() 
  
         } 
        }) 
       }) 
      } 
  })(jQuery); 
  
  
  #app/assets/javascripts/application.js 
  //Livesearch 
  $(document).ready(function() { 
      var base_url = window.location.protocol + "//" + window.location.host; 
  
      $('#SearchSearch').searchbox({ 
       url: base_url + '/search/', 
       param: 'search', 
       dom_id: '#livesearch', 
       loading_css: '#livesearch_loading' 
      })  
  });