3

I'm currently trying to set up autocomplete on a search field. I am using the rails4-autocomplete gem. I've read the documentation here: https://github.com/peterwillcn/rails4-autocomplete and followed all the steps to make it work, and it does work. I start typing in the search box and I get the results I expected.

My next step was to implement one-click search feature. When I click on the one of the autocomplete suggestions, I want the site to go to the corresponding page for that item. I used the advice on this page called Autocomplete Magic with Rails at http://www.yoniweisbrod.com/autocomplete-magic-with-rails/

Basically you add an event hook that submits the search button when an item is selected.

$( document ).ready(function() {
  $('.search-query').bind('railsAutocomplete.select', function(event, data {
    $('.search-me').trigger('click')
  });
});

This kind of works when I implement it, as in sometimes when I click on the item I want it goes to the page, and other times it doesn't go anywhere. It simply fills the text box with the item info but doesn't submit. In these instances I get a jQuery error that reads:

 Uncaught TypeError: this.source is not a function - autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1:440 

Refreshing the page fixes the issue, which led me to think my javascript wasn't loading in the right order. So I implemented the jQuery Turbolinks gem to make sure that my jQuery event were always loading without page refreshes. This didn't help.

For informational purposes, my jQuery looks as follows:

$( "#username" ).autocomplete({ html: true });

Setting the html option to true allows me to render html in the search results.

I've been googling, but so far no luck. Any ideas, anyone? Thanks!

1 Answer 1

0

I believe you you didn't add source to the autocomplete:

var data = ['one', 'two'];
$("#your-id").autocomplete({
  data
});
3
  • Thanks for the suggestion. Unfortunately, specifying the source to the autocomplete doesn't seem to make a difference.
    – Nic
    Commented Dec 28, 2015 at 16:39
  • try this: `$("#your-id").autocomplete({source: data}); Commented Dec 28, 2015 at 17:15
  • That's exactly what I did but no luck: $( "#username" ).autocomplete({ html: true }, {source: source_array});
    – Nic
    Commented Dec 28, 2015 at 17:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.