jquery-ui autocomplete benim Raylar bir uygulama nasıl uygulanacağı konusunda yardıma ihtiyacım var.

Kullanıcı bir müşteri adına girebileceği bir metin alanına otomatik tamamlama eklemek istiyorum. Yüzlerce müşteri, otomatik tamamlama değerleri öne çıkarmak için ihtiyacım olacak 'uzaktan', olarak, bir tablo (en azından benim anladığım). olabilir gibi

Anlamak için başarısız olduğum esas nokta tamamlama metin kutusu için önerilen değer vermelidir. Jquery-uı belgeleri okudum, ama biraz bu konuda yoğun gibi görünüyor.

Ne yani ben gerçekten sonra bir örnektir nasıl alabilirim bu iş için bir Rails uygulaması, mutlaka bir tam açıklaması nasıl javascript yerleşik (o da ne jquery-uı takımı için yaptıklarıyla beni =) ).

Örneğin, otomatik tamamlama için veri hazırlamak, ve nasıl bu otomatik tamamlama işlevselliği bir textbox Ekle.

Eğer kimse bu konuda yardımcı olabilir eğer bu harika olurdu.

Ben hiç bu kadar kendim çözmeye sona erdi yukarıdaki soruma cevap alamadım. Aynı şeyi merak eden başka arkadaşlar vardır diye bulduğum çözümü dışarıda yazı gerektiğini düşündüm.

Bilmeniz gereken ilk şey bu javascript ile benim ilk deneyim olduğunu ve sadece Rayların öğreniyorum. Yani düzenlemek için çekinmeyin, yorum her yerde bu sorun gitti hissediyorum. Doğru ya da yanlış en azından istediğim şekilde çalışır biliyorum.

Bu örnek olduğunu göstermenin en iyi yolu bence. Aşağıdaki benim app çalışmak için otomatik tamamlama widget var. Eğer ne olup bittiğini anlamıyorsun bile devam edin ve uygulamayı aşağıdaki kodu koyabilirsiniz, sonra her bir parça örnek ile nasıl çalıştığını anlatayım. Bundan sonra kullanımınız için değiştirebilir veya dürbün için nasıl bir kavrayışa sahip olmalıdır.

< / ^ br . EĞER RAYLAR APP JQUERY UI VARDIR.

jQuery UI ve bir kopyasını indirinjquery-ui-1.8.2.custom.min.jssenin içinde/kamu/javascriptdizin. Ayrıca emin olun kendisi bir WordPress kullanmak ve bu da aynı klasörün bir kopyası var.

Senin içinde jQuery ve jQuery UI dosya dosya vardıruygulama.html.erbböyle bir dosya.

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

JQuery UI download, CSS tüm verilerinizi içeren bir klasör olacak. Adı, seçtiğiniz temaya bağlı olarak değişir, örneğin tema seçtimcupertino'. Yerine tüm klasör CSS verilerini içeren '/public/stylesheets/'. Vardır uygulamanızda CSS dosyası.html.bu gibi erb.

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

< / ^ br . ÖRNEK JAVASCRİPT OTOMATİK TAMAMLAMA

Şimdi aşağıdaki kod parçasını alıp bir yeryeni' manzarası. Herhangi bir görünümde bunu kullan, ama kelimenin tam anlamıyla varolan bir görünümü denetleyicisi adında ait almış olduğunu fark olabilir, ve bir veri çekme''. people_controller links_controller Umarım Raylar bu işlerin bu kadar değiştirmeye ne gerek çalışmak için bu kadar konuştuğumuz yeter.

-- Kod büyük bir yığın başlar

    <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 %>

-- Kod -- Büyük bölümü bitirmek

Tamam şimdi boşlukları doldurmak için.

< / ^ br . OTOMATİK TAMAMLAMA İÇİN VERİ ÖNERİ OLARAK KULLANMAYI SAĞLAR

Otomatik tamamlama özelliği önerileri açılan görüntüleyebilir başlamasıyla bazı veri bağlamak olanak sağlar. Kullanacağınız biçim JSON, ama eğer biliyorsanız merak etmeyin ... ben = ne) yok. Senin/diğer uygulamalar diğer bölümlerini kullanabilmesi için metni biçimlendirmek için bir yol olduğunu bilmek yeterli.

Bu özelliği otomatik tamamlama için gereken veri belirtilen 'kaynak:' seçeneği. Halkların isim listesi ve otomatik tamamlama için KİMLİĞİNİ göndermek istiyorum çünkü kaynak olarak aşağıdaki koyacağız.

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

Bir dizeye çevirir yukarıda raylar Yardımcısı "/insanlar.json". Bir sayfa oluşturmak için gerekmez "/insanlar.json". Yapmanız ne ile /insanlar için bir istek aldığında ne people_controller söyle .json format. Senin people_controller içine şunları koyun:

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

Şimdi @tüm insanlar otomatik tamamlama özelliği için gönderildik. Bu çok ileri noktaya getirir.

< / ^ br . FİLTRE VERİ GİRİŞİ DAYALI OTOMATİK TAMAMLAMA ÖNERİ İÇİN KULLANILIR

Nasıl otomatik tamamlama özelliği sonuçları sizin türü ne göre filtre uygulamak için nasıl biliyor mu?

Otomatik tamamlama widget özelliği atanmış olan olay türü ne olursa olsun kaynak parametre olarak gönderir:. Parametre gönderiliyor "terim". Yani eğer yazın olsaydı "" bu olay, aşağıdaki şekilde olacaktır: . Joe

/people.json?term=joe

Bu kontrol aşağıdaki koyduk

# 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

Kayıtları @insanlar otomatik tamamlama yazdığınız ne dayalı ve olay atanan sayısı sınırlı şimdi, şimdi otomatik tamamlama öneriler için JSON biçime çevirebiliriz.

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

Şimdi, sadece yorum içinde inceleme "Kod Büyük bir Yığın," bu arada nasıl bir bağ geri kalanı açıklamalıdır.

Sonunda otomatik tamamlama ve kumanda için bir parametre KİMLİĞİ gönderecek gizli bir alan olarak görür sayfanızda bir metin olmalıdır.

< / ^ br . KENDİ OTOMATİK TAMAMLAMA ÖZELLEŞTİRİN

Yukarıdaki anlamak ve kullanmak için değiştirmek istediğiniz bir kez, Biçim JSON böyle denetleyicisi görünüyor döndü.:

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

Bu durumda, javascript JSON dize farklı değerlere erişmek için bir yol olabilir:

uı.madde.kişi.name_of_some_attribute_such_as_given_name

Oldukça basit. Raylar ActiveRecord öznitelik erişmek gibi bir şey.

Son bir not. Bu fonksiyon, jquery widget yerleşik olması gerektiğini düşündüm bu sefer çok farklı bir şekilde gizli değeri sağlamak için harcadım,. Ancak, bu durum böyle değil. Açıkça farklı bir değer parametre olarak seçilen göndermek için, gizli bir alanı kullanmak için resmi bir WordPress kullanmak örnek gösterilir.

Peki o birisi yardımcı olur umarım.

Dale