Bunun için jQuery UI kütüphanesine ihtiyacımız var. Kütüphaneyi projemize eklemek için jquery-ui-rails gemini kulanacağız. Gemfile dosyasına gemi gem "jquery-ui-rails" ekledikten sonra bundle install komutunu çalıştıralım. Javascript kütüphanesini çağırmak için application.js dosyasına

1

//= require jquery.ui.autocomplete

Css kütüphanesini çağırmak için application.css.scss dosyasına

1
2
3

/*
*= require jquery.ui.autocomplete
*/

satırlarını ekleyelim.

Şimdi autocomplete yapılacak olan alanı oluşturalım.

1

= f.text_field :name_or_country_name_cont, id: 'search_zones', :class => 'search-query',  :placeholder => "#{t('search')}...", data: {autocomplete_source: auto_admins_zones_path}

data autocomplete için arama yapacağı yol.

Şimdide bu alana autocomplete özelliği verelim.

1
2
3
4
5
6
7
8
9
10

//application.js
$(document).ready(function() {
    $('.search-query').autocomplete({
        source: $('.search-query').data('autocomplete-source'),
        messages: {
            noResults: null,
            results: function() {}
        }
    });
});

.search-query clas’ ına sahip alanlara autocomplete özelliği eklemiş olduk. source parametresi ise autocomplete için verilerin yolu. messages parametresi ise ismindende anlaşılacağı gibi mesaj ayarları için. “1 sonuç bulundu, Hiç sonuç bulunamadı …” gibi. Burada hiç bir mesaj döndürmüyor.

Şimdi autocomplete için json veri döndürecek metodu yazalım.

1
2
3
4
5

  def auto
    search = Zone.search(:name_or_country_name_start => params[:term])
    zones = search.result(:distinct => true).limit(10)
    render :json => zones.map {|p| Hash[id: p.id, label: p.name, name: p.name]}
  end

Arama işlemlerinde ransack kullanıyorum kafanız karışmasın. Automoplete aranılan veriyi term parametresi olarak gönderiyor.

Autocomplete için daha detaylı dökümana buradan ulaşabilirsiniz.

İyi çalışmalar dilerim.