[RUBY-ON-RAILS] 어떻게 레일에서 셋업 JQuery와 - UI를 자동 완성으로

어떻게 레일에서 셋업 JQuery와 - UI를 자동 완성으로

내 레일 응용 프로그램에서 JQuery와 - UI를 자동 완성을 구현하는 방법에 대한 몇 가지 도움이 필요합니다.

나는 사용자가 고객 이름에 입력 할 수있는 텍스트 필드에 자동 완성을 추가 할 수 있습니다. 수백 명의 고객이있을 수 있듯이, 나는 테이블에서와 같이, '원격'제안 자동 완성 값을 당겨야합니다 (적어도 이것은 내가 이해하는 것입니다).

내가 이해하는 데 실패하고 주요 포인트는 자동 완성 텍스트 상자에 제안 된 값을 제공하는 방법입니다. 나는 JQuery와 - UI 문서를 읽을 수있다, 그러나 나는이 문제에 약간의 조밀 한 것 같다.

그래서 정말 후 나는 것은 내가 레일 응용 프로그램, 반드시 자바 스크립트가 내장 방법에 대한 자세한 설명에 작업이를 얻을 수있는 방법의 예입니다) (의 어떤 것을 JQuery와 - UI 팀이 나를 위해 = 수행하고있다).

예를 들어, 내가 어떻게 자동 완성에 대한 데이터를 준비 않으며, 어떻게 텍스트 상자에 자동 완성 기능을 장착 않습니다.

해결법

1. ==============================

   1.잘 나는 나 자신을 위해 그것을 파악하는 데 결국 그래서 위의 제 질문에 대한 답변을 없었어. 난 내가 경우에 같은 일을 궁금해하는 거기 다른 남자가 함께했다 솔루션을 게시해야한다고 생각.

   잘 나는 나 자신을 위해 그것을 파악하는 데 결국 그래서 위의 제 질문에 대한 답변을 없었어. 난 내가 경우에 같은 일을 궁금해하는 거기 다른 남자가 함께했다 솔루션을 게시해야한다고 생각.

   당신이 알아야 할 첫 번째 일이 자바 스크립트 내 첫 경험이고, 난 그냥 레일의 요령을 얻고 있다는 점이다. 그래서 모든 수단에 의해, 편집에 자유롭게 의견 어디서나 당신은 내가이와 사라 잘못을 느낀다. 오른쪽 또는 내가 내가 그것을 원하는 방식으로 작동하는지 알고 적어도 잘못된.

   나는이를 표시하는 가장 좋은 방법은 예입니다 생각합니다. 다음은 내 응용 프로그램에서 작동하도록 자동 완성 위젯을 가지고하는 방법입니다 그래서. 당신은 가서 당신이 무슨 일이 일어나고 있는지 이해하지 못하고 각 부분이 예에 의해 작동하는 방법을 우리가 가서 할 경우에도 앱에서 다음 코드를 넣을 수 있습니다. 이 후, 당신은 당신의 사용을 위해 수정하거나 굴절하는 방법에 대한 이해가 있어야한다.

   JQUERY UI에 레일 APP을 포함한다.

   당신의 / 공공 / 자바 스크립트 디렉토리 안에 jQuery를 UI 및 장소 JQuery와-UI-1.8.2.custom.min.js의 사본을 다운로드합니다. 또한 확실히 당신은 jQuery를 자신의 복사본이 있는지 확인하고이 같은 폴더도이다.

   JQuery와 UI 파일이처럼 application.html.erb 파일에서 jQuery를 파일을 포함합니다. (당신이 오래가 일치로 원하는대로 당신은 파일 이름을 지정할 수 있습니다)

   <%= javascript_include_tag 'jquery.min', 'jquery-ui-1.8.2.custom.min.js' %>
   

   jQuery를 UI의 다운로드, 당신은 당신의 CSS의 모든 데이터가 들어있는 폴더를해야합니다. 이름은 내가 주제 '쿠퍼 티노'를 선택했다 예를 들어 사용자가 선택한 테마에 따라 달라질 수 있습니다. '/ 공공 / 스타일 /'로 CSS 데이터를 포함하는 전체 폴더를 놓습니다. 그런 다음이처럼 application.html.erb에서 CSS 파일을 포함한다.

   <%= stylesheet_link_tag 'cupertino/jquery-ui-1.8.2.custom' %>
   

   예 AUTOCOMPLETE JAVASCRIPT

   이제 다음 코드 덩어리를 가지고 당신의 '새'보기 중 하나에 넣습니다. 당신은 어떤 관점에서 이것을 사용하지만, 말 그대로 'links_controller'라는 컨트롤러에 속하는 기존 뷰에서 촬영 한 실현, 그리고 그것은 'people_controller'에서 데이터를 당겨 수 있습니다. 바라건대 당신은 당신이 당신을 위해이 작품 있도록 변경해야하는 것을 해결하기 위해 레일에 대해 충분히 알고있다.

   - 코드의 큰 덩어리를 시작합니다 -

       <script type="text/javascript">
       $(function() {
   
    // Below is the name of the textfield that will be autocomplete    
       $('#select_origin').autocomplete({
    // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
               minLength: 2,
    // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
               source: '<%= people_path(:json) %>',
     // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
               focus: function(event, ui) {
                   $('#select_origin').val(ui.item.person.given_name);
                   return false;
               },
    // Once a value in the drop down list is selected, do the following:
               select: function(event, ui) {
    // place the person.given_name value into the textfield called 'select_origin'...
                   $('#select_origin').val(ui.item.person.given_name);
    // and place the person.id into the hidden textfield called 'link_origin_id'. 
           $('#link_origin_id').val(ui.item.person.id);
                   return false;
               }
           })
    // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized.
           .data( "autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li></li>" )
                   .data( "item.autocomplete", item )
    // For now which just want to show the person.given_name in the list.
                   .append( "<a>" + item.person.given_name + "</a>" )
                   .appendTo( ul );
           };
       });
       </script>
   
   
   
   <h1>New link</h1>
   
   <% form_for(@link) do |f| %>
     <%= f.error_messages %>
   
   <!-- Place the following text fields in your form, the names are not important. What is important is that they match the names in your javascript above -->
     <p>
           Select which person you want to link:<br /> 
   <!-- This is the textfield that will autocomplete. What is displayed here is for the user to see but the data will not go anywhere -->
           <input id="select_origin"/>
   <!-- This is the hidden textfield that will be given the Persons ID based on who is selected. This value will be sent as a parameter -->
         <input id="link_origin_id" name="link[origin_id]" type="hidden"/>
     </p>
   <!-- end of notes -->
     <p>
       <%= f.label :rcvd_id %><br />
       <%= f.text_field :rcvd_id %>
     </p>
     <p>
       <%= f.label :link_type %><br />
       <%= f.text_field :link_type %>
     </p>
     <p>
       <%= f.label :summary %><br />
       <%= f.text_area :summary %>
     </p>
     <p>
       <%= f.label :active %><br />
       <%= f.check_box :active %>
     </p>
     <p>
       <%= f.submit 'Create' %>
     </p>
   <% end %>
   

   - 코드의 끝 큰 덩어리 -

   자 이제 점을 연결합니다.

   데이터에 대한 자동 완성 사용과 같은 제언을 제공

   자동 완성 텍스트 필드가 제안 드롭 다운 메뉴에서 표시 할 수있는 몇 가지 데이터를 연결하여 시작할 수 있습니다. 우리가 사용하게 될 형식은 JSON이지만) = 당신이 익숙하지 않은 경우 걱정하지 ... 나도 오전하지 않습니다. 당신의 다른 부분은 / 다른 응용 프로그램에서 사용할 수 있도록이 텍스트 서식 할 수있는 방법을 것을 알고 좋은 충분하다.

   텍스트 필드가 자동 완성에 필요한 데이터는에 지정된 '소스'옵션을 선택합니다. 우리는 자동 완성에 사람들의 이름 목록과 ID를 보낼 때문에 우리는 소스로 다음을 넣어 것입니다.

   source: '<%= people_path(:json) %>'  
   

   레일은 문자열 "/people.json"로 번역됩니다 위의 도우미. 당신은 "/people.json"에서 페이지를 만들 필요가 없습니다. 당신이해야 할 것은이 .json 형식과 / 인에 대한 요청을 수신 할 때 무엇을 당신의 people_controller에게 있습니다. 당신의 people_controller에 다음을 넣어 :

   def index  
   # I will explain this part in a moment.
     if params[:term]
       @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
     else
       @people = Person.all
     end
   
     respond_to do |format|  
       format.html # index.html.erb  
   # Here is where you can specify how to handle the request for "/people.json"
       format.json { render :json => @people.to_json }
       end
   end
   

   이제 우리는 @people에있는 모든 사람들이 자동 완성 텍스트 필드에 전송되고 있습니다. 이것은 바로 다음 지점을 제공합니다.

   입력을 기반으로 AUTOCOMPLETE SUGGESTION에 사용되는 필터 데이터,

   어떻게 자동 완성은 사용자가 입력 한 내용을 기반으로 결과를 필터링하는 방법을 알고 텍스트 필드는 무엇입니까?

   위젯 텍스트 필드에 할당 된 자동 완성은 당신이 당신의 소스 매개 변수로 텍스트 필드에 입력 한대로 보내드립니다 :. 매개 변수 인 보냈습니다 "는 용어"입니다. 당신이 텍스트 필드에 "조"를 입력했다 그래서, 우리는 다음을 수행 할 것입니다 :

   /people.json?term=joe
   

   우리는 컨트롤러에서 다음이 이유입니다 :

   # If the autocomplete is used, it will send a parameter 'term', so we catch that here
       if params[:term]
   # Then we limit the number of records assigned to @people, by using the term value as a filter.
         @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
   # In my example, I still need to access all records when I first render the page, so for normal use I assign all. This has nothing to do with the autocomplete, just showing you how I used it in my situation.
       else
         @people = Person.all
       end
   

   이제 우리는 자동 완성 텍스트 필드에 입력 된 내용을 기반으로 @people에 할당 된 레코드의 수를 제한하는 것이, 우리는 이제 자동 완성 제안을 JSON 형식으로 그것을 켤 수 있습니다.

   respond_to do |format|  
         format.html # index.html.erb  
         format.json { render :json => @people.to_json }
       end 
   

   자, 그냥 같이 방법이 관계의 나머지 부분을 설명해야한다 "코드의 큰 덩어리"내부의 의견을 검토합니다.

   끝에서 당신은 자동 완성 및 컨트롤러에 매개 변수의 ID를 보내드립니다 숨겨진 필드 역할 페이지에서 텍스트 필드를 가져야한다.

   당신의 자신의 AUTOCOMPLETE을 사용자 정의

   위의 이해하고 당신이 당신의 사용을 위해 수정할 후에는 형식 JSON이 같은 컨트롤러의 외모에서 반환 된 것을 알아야한다 :

   [{"person":{"id":1,"given_name":"joe","middle_name":"smith","family_name":"jones","nationality":"australian"}}]
   

   이 경우에 자바 스크립트에서 JSON 문자열에서 다른 값에 액세스하는 방법은 다음과 같습니다

   ui.item.person.name_of_some_attribute_such_as_given_name

   꽤, 간단한. 레일의 액티브 속성을 액세스하는 등의 많은.

   마지막으로 참고. 나는이 기능은 JQuery와 위젯에 내장되어 있어야합니다 생각으로 나는, 숨겨진 값을 제공 할 수있는 다른 방법을 찾고 많은 시간을 보냈다. 그러나 이것은 사실이 아니다. 분명히 다음 매개 변수로 선택된 다른 값을 전송하는 방법은, 숨겨진 필드를 사용하는 것입니다 공식 jQuery를 예에 표시됩니다.

   그럼 난 그 사람을 도움이되기를 바랍니다.

   골짜기

2. ==============================

   2./ 1.10 1.9 jQuery를 키 자동 완성을 제거하고 추가 uiAutocomplete

   / 1.10 1.9 jQuery를 키 자동 완성을 제거하고 추가 uiAutocomplete

   .data("uiAutocomplete") instead of .data("autocomplete")
   

   위에서 수정 한 후, 나를 위해 일했다.

3. ==============================

   3.데일의 대답은 아주 튜토리얼입니다. 주의 할 점은 첫 번째 쿼리를 사용하여 데이터 소스는 사용자가 입력 한 문자열로 시작하는 경기를 반환 할 것입니다. 당신은 단어 검색 어디를 원하는 경우에, 당신은 변경해야합니다 :

   데일의 대답은 아주 튜토리얼입니다. 주의 할 점은 첫 번째 쿼리를 사용하여 데이터 소스는 사용자가 입력 한 문자열로 시작하는 경기를 반환 할 것입니다. 당신은 단어 검색 어디를 원하는 경우에, 당신은 변경해야합니다 :

   @people = Person.find(:all,:conditions =>
       ['given_name LIKE ?', "#{params[:term]}%"])
   

   에

   @people = Person.find(:all,:conditions =>
       ['given_name LIKE ?', "%#{params[:term]}%"])
   

   (쿼리에 추가 % 추가)

4. ==============================

   4.나는 기본적으로 아래 데일의 조언을 따라하지만 내 컨트롤러와의 js 파일은 약간 자신의 버전은 (아마도 JQuery와 업데이트 BC) 어떤 이유로 나에게 문제를주고 있었다 하나로 결정되었다

   나는 기본적으로 아래 데일의 조언을 따라하지만 내 컨트롤러와의 js 파일은 약간 자신의 버전은 (아마도 JQuery와 업데이트 BC) 어떤 이유로 나에게 문제를주고 있었다 하나로 결정되었다

   컨텍스트 : 나는 사용자가 입력 디제이의 자동 완성 이름으로 시도하고있다 - 또한 newb

   디제이 컨트롤러

    class DjsController < ApplicationController
       def index
        if params[:term]
          @djs = Dj.is_dj.where('lower(name) LIKE ?', "%#{params[:term].downcase}%")
          respond_to do |format|  
             format.html
             format.json { render :json => @djs.map(&:name) }
          end
        end    
      end
    end
   

   html.erb 필렛

     <script type="text/javascript">
   
   $(function() {  
       $('#select_origin').autocomplete({
           source: '<%= djs_path(:json) %>'
         })
   
       $('.submit-comment').click(function(){
         var dj_name = $('#select_origin').val();
         $('#link_origin_id').val(dj_name);
       })
   
   })
   
   </script>
   

5. ==============================

   5.이것은 큰 도움이됩니다.

   이것은 큰 도움이됩니다.

   당신이 사용자의 이미지의 URL을 가져 오기 위해 필요한 경우 경우에 그것에 또한, to_json 가능하지 않을 수 있습니다. 그 모델에 다음 코드를 추가합니다.

   def avatar_url
       avatar.url(:thumb)
   end
   

   그리고 대신 to_json 사용 as_json의 컨트롤러

   respond_to do |format|
       format.json {render :json => @users.as_json(:only => [:id,:name,:username], :methods => [:avatar_url]) }
   end 
   

6. ==============================

   6.그것은 당신의 '소스'가 상대적으로 작은 경우, 예를 들어 50 요소, 구현이 달라야하는 것이 중요 (그리고 훨씬 더 간단). 그것은 공식 문서의 네 번째 단락에서 언급 한 :

   그것은 당신의 '소스'가 상대적으로 작은 경우, 예를 들어 50 요소, 구현이 달라야하는 것이 중요 (그리고 훨씬 더 간단). 그것은 공식 문서의 네 번째 단락에서 언급 한 :

   https://api.jqueryui.com/autocomplete/

   로컬 데이터를 사용하는 경우 당신이해야 할 모든 데이터를 획득하고 자동 완성 방법에 전달하고, 그것은 당신을 위해 필터링을 할 것입니다. 당신은 앞뒤로 서버에 용어를 입력 ES마다 갈 필요가 없습니다.

   function filterByTags(tags) {
     $("#stories-filter").autocomplete({
        source: tags,
        autoFocus: true
     });
   }
   
   $("#stories-filter").click(function() {
     $.ajax({
       dataType: 'json',
       method: 'GET',
       url: 'tags/index',
       data: $(this).data('project-id'),
       success: function (response) {
         if(response.success) {
           var tags = response.data.tags;
           filterByTags(tags);
         }
       },
       error: function (response) {
         if(response.status === 422) {
           var $errors = 'There are no tags in this project',
               $errorsContainer = $('.error-container');
           $errorsContainer.append($errors);
           $errorsContainer.show();
         }
       }
     });
   });
   

7. ==============================

   7.이 오래된,하지만 여전히, 여기에 기본적으로 좋은 메인 대답에 대한 작은 메모를 제공 구글,하지만 몇 가지 변경 이후 :

   이 오래된,하지만 여전히, 여기에 기본적으로 좋은 메인 대답에 대한 작은 메모를 제공 구글,하지만 몇 가지 변경 이후 :

from https://stackoverflow.com/questions/3188157/how-to-set-up-jquery-ui-autocomplete-in-rails by cc-by-sa and MIT license