Skip to main content

Global Autocomplete Search Discussion

General • Asked by Chris Oliver
7a0701f73e80da8b466634f58a0dcb33

Awesome episode Chris! Thanks!


216807016ca03334908dc6e18fd8c84e

Great tut!

What if I want to put a thumb near the text?

Thanks!

0ca89ebf7d7ca13c3076b538bdd79e16

i'm using this for "episodes" instead of "movies" so i have:

json.episodes do
json.array!(@episodes) do |episode|
json.title "Ep #{episode.episode}: #{episode.title}"
json.icon "#{episode.podcast.logo}"
json.url episode_path(episode)
end
end

json.podcasts do
json.array!(@podcasts) do |podcast|
json.title "#{podcast.title}"
json.icon "#{podcast.logo}"
json.url podcast_path(podcast)
end
end

and my search.js adds template function as well:

window.addEventListener("load", function() {
$input = $("[data-behavior='autocomplete']")

var options = {
getValue: "title",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "episodes",
header: "Episodes",
},
{
listLocation: "podcasts",
header: "Podcasts",
}
],
template: {
type: "iconLeft",
fields: {
iconSrc: "icon"
}
},
theme: "blue-light",
list: {
onChooseEvent: function() {
var url = $input.getSelectedItemData().url
$input.val("")
window.location = (url)
},
showAnimation: {
type: "fade",
time: 300,
callback: function() {}
},
hideAnimation: {
type: "fade",
time: 300,
callback: function() {}
},
}
}

$input.easyAutocomplete(options)
});


E5c8c1e04ba0d23d74878af605ac37a0

Ce8f0be4c48e2b842844c5a3607c4d2e

Hey Chris Awesome Tutorial.
Can you do an Instagram like app tutorial with features like geolocation,tagging user in an image and hashtags


2e2231c42b734347ef18ca82f12506d7

Chris thank you for this video, super helpful! I get a strange error though when following you at the end. In my navbar page - "undefined method `form_with' for #<#<class:0x007f875a6f8b58>:0x007f87600e0aa8>" I decided to hack away and switch form_with for form_tag but then I get an error on the line immediately below "undefined method `text_field' for nil:NilClass" I double checked my code and don't know what could be causing it. Any help would be amazing sir thanks :)
Github: https://github.com/OmarZV/s...

9d7f0b771e28ff105feab480cc8704c0

Hey Omar, in your gem file change rails gem to the latest: gem 'rails', '~> 5.1.1' or higher
consol: bundle update
Restart your rails application
Hope this works for you

23e4327e4956f0e491c8f5eeeb9e7579

Had the same issue and rewrote the form_tag, for code see my comment above


F780e037e8fccea9d33226c1d9b97f63

SHouldn't jquery and all dependencies be in /vendor/assets/javascripts folder? Just asking.. I thouhgt that is the 'recommended way'..


23e4327e4956f0e491c8f5eeeb9e7579

For anyone on Rails <5.1, this example code for `form_tag` can be used to replace `form_with`:

<%= form_tag('/search', local: true, method: :get, class: 'form-inline' ) do %>
<%= text_field_tag(:q, nil, data: { behavior: 'autocomplete' }, placeholder: 'Search', class: 'form-control mr-sm-2') %>
<%= button_tag('Search', class: 'btn btn-outline-success my-2 my-sm-0', type: 'submit') %>
<% end %>

or more readable as GitHub gist: https://gist.github.com/spe...

Fd268dbbc1e326444ed15e65ac57de9e
Phew... Thank you!

267092722f74a30e463cbe14e84cca1a

Hi Chris,

Thanks for this it has really helped me!

Does anyone know the best way to search multiple columns from model?

Something like : Search Movies by name and date and genre.

Any pointers would be appreciated!

Dan


9d7f0b771e28ff105feab480cc8704c0

Hi Chris, I'm trying to get my search form back to mobile responsive.
data: { behavior: "autocomplete" } in the form triggers easy-autocomplete functionality. But the search form/layout becomes mobile unresponsive when I add "data: { behavior: "autocomplete" } " Please do you know how I can fix this in the easy-autocomplete css file?

<%= form_with url: search_path, local: true, method: :get, :class => "" do |form| %>
<div class="input-group m-b-20">
<%= form.text_field :q, placeholder: "Search and select or hit enter", data: { behavior: "autocomplete" }, class: "form-control input-lg" %>

<button type="submit" class="btn btn-lg"></button>
</div>

<% end %>


0ca89ebf7d7ca13c3076b538bdd79e16

if you're not using turbolinks (which i'm not), replace search.js with:

window.addEventListener("load", function() {
$input = $("[data-behavior='autocomplete']")

var options = {
getValue: "title",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "movies",
header: "Movies",
},
{
listLocation: "directors",
header: "Directors",
}
],
list: {
onChooseEvent: function() {
var url = $input.getSelectedItemData().url
$input.val("")
window.location = (url)
}
}
}

$input.easyAutocomplete(options)
});


1b69a554460396ec726e5f345371173a

Hi everyone! please i get this error "undefined method `ransack' for #<class:0x1135dad8>".

1b69a554460396ec726e5f345371173a

I got it... I had to restart the server. sorry for disturbing the conversation.


216807016ca03334908dc6e18fd8c84e

When I try to use .easyAutocomplete from console I get this error:

TypeError: $('input').easyAutocomplete is not a function. (In '$('input').easyAutocomplete(options)', '$('input').easyAutocomplete' is undefined)

And I get this as well that call css.map ????

http://localhost:3000/assets/easy-autocomplete.themes.cs... Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:3000/assets/easy-autocomplete.css.map. Failed to load resource: the server responded with a status of 404 (Not Found)

I follow this tutorial but I get these error... Thank you very much if someone know how solve it!

F1ce2f75b6e9b2fe3b07c0ede53722f3
Rodrigo, could you figure out  ? i have the same issue

9d7f0b771e28ff105feab480cc8704c0
Hi Chris I want to add a second search field to the search form, say to search for the location of the Directors. Just like yell.com, where you can enter the search term and the location in different text fields. Could you please help on how to write the ransack logic in the form and the main_controller?  
Thanks

919809f815e7501a83848e34942a3b72
Would love to see this in Vue within an app-wrapper (data-behavior='vue') like you talked bout in ep 239! I've been banging my head against a number of these options (https://github.com/vuejs/awesome-vue#autocomplete) within the context of a Rails app.

F1ce2f75b6e9b2fe3b07c0ede53722f3
Hi Chris, 
At some stage you remove :

render json: {users: [], events: [], entreprises: []}

And from there i have

MainController#search is missing a template for this request format and variant. request.formats: ["application/json"] request.variant: []

Is there something your video is skipping please?


1b69a554460396ec726e5f345371173a
Hello Chris!

Thanks for this awesome tutorial. In my case i implemented search for two models, one for stories => "title", while the other one for users => "user_name". I got the stories part working but whenever i search for a user it queries it well but didn't show the user_name of the user in the dropdown menu, it displayed "undefined" and redirects me to the right path of the searched user... I'm thinking this caused by the search.js here:

var options = {
    getValue: "title",
    url: function(phrase) {
      return "/search.json?q=" + phrase;
    },
    categories: [
      {
        listLocation: "stories",
        header: "<strong>Stories</strong>",
      },
      {
        listLocation: "users",
        header: "<strong>Users</strong>",
      }
    ],
    list: {
      onChooseEvent: function() {
        var url = $input.getSelectedItemData().url
        $input.val("")
        Turbolinks.visit(url)
      }
    }
  }


1b69a554460396ec726e5f345371173a
 Hello Chris!

Thanks for this awesome tutorial. In my case i implemented search for two models, one for stories => "title", while the other one for users => "user_name". I got the stories part working but whenever i search for a user it queries it well but didn't show the user_name of the user in the dropdown menu, it displayed "undefined" and redirects me to the right path of the searched user... I'm thinking this caused by the search.js here:

var options = {
    getValue: "title",
    url: function(phrase) {
      return "/search.json?q=" + phrase;
    },
    categories: [
      {
        listLocation: "stories",
        header: "<strong>Stories</strong>",
      },
      {
        listLocation: "users",
        header: "<strong>Users</strong>",
      }
    ],
    list: {
      onChooseEvent: function() {
        var url = $input.getSelectedItemData().url
        $input.val("")
        Turbolinks.visit(url)
      }
    }
  } 

9d7f0b771e28ff105feab480cc8704c0
How can I fetch a full country name in the search.json.jbuilder. I am using the Country_select gem and autocomplete results is showing only a country short code like GB for United Kingdom.

Here is my code in the search.json.jbuilder:
json.movies do
  json.array!(@movies) do |movie|
    json.name movie.title.titleize + " " + "in" + " " + movie.country
    json.url movie_path(movie)
  end

movie.rb
 def country_name
    country = self.country
    ISO3166::Country[country]
   end

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 18,000+ developers who get early access to new screencasts, articles, guides, updates, and more.

By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

More of a social being? We're also on Twitter and YouTube.