Easy-autocomplete issue

rubyonrails-talk
1

Hi,

I’m facing to an issue with easy-autocomplete jQuery plugin under rails 6.1. I appy consciensouly this tutorial “Dynamic autocomplete in Rails 6” to my dev; unfortunately, I still have this problem in my browser:

Uncaught TypeError: $(...).easyAutocomplete is not a function
    at HTMLDocument.<anonymous> (buy:276)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

JS script in my ERB form view:

<%= form_with(model: [ @portfolio, @order ] ) do |form| %>
     <%= form.search_field :asset_id, "data-behavior" => "autocomplete" %>
<% end %>
<script>
document.addEventListener("turbolinks:load", function() {
  $('order_asset_id').easyAutocomplete({
    url: function (phrase) {
      return "/shares/search?query=" + phrase;
    },
    getValue: "id"
  });
});
</script>

$('order_asset_id') return this in my Brave dev console:

./node_modules/jquery/src/core/init.js.jQuery.fn.init [prevObject: ./node_modules/jquery/src/core/init.js.jQuery.fn.init(1)]
length: 0
prevObject: ./node_modules/jquery/src/core/init.js.jQuery.fn.init [document]
[[Prototype]]: Object(0)
add: ƒ add(selector, context)
addBack: ƒ addBack(selector)
addClass: ƒ addClass(value)
after: ƒ after()
ajaxComplete: ƒ (fn)
// ... etc

Did I miss something to initialize easy-autocomplete plugin ?

2

You have two issues : you are not loading the library and your selector should target an id or a class for instance (e.g. with a dot or an hashtag in front)

3

Hi Dorian, I can not offer you any help. But I want to get rid of the jquery autocomplete at all. because this pulls in 28k of legacy jquery code in.

Maybe it should just be a select?

4

@foonlyboy maybe you want to use https://select2.org/ instead?

5

Hi dorianmariefr, thanks for coming back to me.

We have all this bagage of the jquery, only for the autocomplete.

I really want to throw this out. The jquery autocomplete is the drag in the house.

6

there are select2 alternatives without jquery Select2 alternatives without jQuery - makandra dev

didn’t try them though, maybe a datalist would be enough?

7

Hi Dorian, thanks!

The jquery is a big drag. I really want to throw this out.

watch us at rockers,de ~eike

8

I’ve been using Stimulus Autocomplete lately, and it is really simple to use and style. It’s all vanilla JS inside. If you’re already using Stimulus controllers elsewhere in your Rails application, then it’s a natural fit.

https://github.com/afcapel/stimulus-autocomplete

Walter