2

Autocomplete works ok when searching with a single attribute as given here.

Autocomplete with multiple attributes such as (name,city,country) is possible through->(according to this)

def autocomplete
     Doctor.search(params[:query], autocomplete: true, limit: 10).map{|doctor| doctor.slice(:name, :city, :country) }
end

However this results in the autocomplete dropdown/suggestions to show "undefined".

For type ahead i am using:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>

In the code it is referenced by:

$( function () {
   $("#search").typeahead({
    name: "doctor",
    remote: "/doctors/autocomplete?query=%QUERY"
  });


});

Is some change required in the typeahead js file because of more than one set of data being returned?

Community
  • 1
  • 1
rnjai
  • 1,065
  • 2
  • 17
  • 32
  • Did you try my solution? – Sharvy Ahmed Feb 21 '15 at 08:53
  • @SharvyAhmed I am currently following your blog post and have asked a doubt there itself... – rnjai Feb 21 '15 at 12:18
  • Use TypeaheadJS+BloodhoundJS bundle (http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js) – Sharvy Ahmed Feb 21 '15 at 14:13
  • After adding Bloodhound i have run into a few problems with implementing autocomplete for a single attribute also.Have added details here:http://stackoverflow.com/questions/28654125/searchkick-bloodhound-typeahead-for-autocomplete – rnjai Feb 22 '15 at 03:22

2 Answers2

3

You need to return a hash

Your autocomplete action in doctors controller need to look like this : 

def autocomplete
  render json: Doctor.search(params[:query], autocomplete: true, limit: 10).map do |doctor| { name: doctor.name, city: doctor.city, country: doctor.country }
  end
end

Add displayKey in your typeahead option:

$( function () {
   $("#search").typeahead({
    name: "doctor",
    displayKey: 'name',
    remote: "/doctors/autocomplete?query=%QUERY"
  });
});

You can also read this article and see if it helps.

Sharvy Ahmed
  • 7,247
  • 1
  • 33
  • 46
  • Search on multiple attributes is also working now.Have posted my answer below.Please see if any improvements are possible. – rnjai Feb 22 '15 at 13:20
2

Based on the above answer and this and this
What worked is shown below:

def autocomplete
    names = Doctor.search(params[:query], fields: [{name: :text_start}], limit: 10).map {|Doctor| {store: doctor.name, value: doctor.id}}
    collegenames = Doctor.search(params[:query], fields: [{collegename: :text_start}], limit: 10).map {|Doctor| {store: doctor.collegename, value: doctor.id}}
    render json: (names + collegenames)

end

The variable store: now contains all the data.
Javascript: 

var ready;
ready = function() {
    console.log("dfdf")
    var numbers = new Bloodhound({
      datumTokenizer: function(d) {
            console.log(d);
            return Bloodhound.tokenizers.whitespace('value');
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url:"/doctors/autocomplete?query=%QUERY"
        }


        });

        // initialize the bloodhound suggestion engine

        var promise = numbers.initialize();

        promise
        .done(function() { console.log('success!'); })
        .fail(function() { console.log('err!'); });

        // instantiate the typeahead UI
        $('.typeahead').typeahead(null, {
          displayKey: 'store',
          source: numbers.ttAdapter()
        });
}

$(document).ready(ready);
$(document).on('page:load', ready);

Autocomplete works great on both fields however now i get an empty array on writing a url like

http://localhost:3000/doctors/autocomplete?query="a"
Community
  • 1
  • 1
rnjai
  • 1,065
  • 2
  • 17
  • 32
  • [My comment here](http://stackoverflow.com/questions/28102146/working-twitter-typeahead-example#comment48130283_28102342) may address your problem. – klenwell May 02 '15 at 18:27