dalerka

dalerka

How to use a JS library like Awesomplete within a LiveView?

I’m trygint to get Awesomplete working to add multiple tags to a post.
However following instructions doesn’t do anything, i.e.:

  • I have a working app with Posts and Tags as liveview generated models.
  • My Post’s live form_component.ex looks like:
<%= f = form_for @changeset, "#",
  id: "post-form",
  phx_target: @myself,
  phx_change: "validate",
  phx_submit: "save" %>

  <%= label f, "Post title" %>
  <%= text_input f, :title %>
  <%= error_tag f, :title %>

## Tag input(Awesomplete multi-select)
## @tags = " " - this is set in the form_component.ex/apply_action(socket, :new, _params)
## @tag_names = "tagone, tagtwo, tagthree ..."

  <div class="form-group">
    <%= label f, :tags, class: "form-label" %>
    <%= text_input f, :tags, value: @tags, "data-list": @tag_names, "data-multiple": true %>
    <%= error_tag f, :tags %>
  </div>

  <%= submit "Save", phx_disable_with: "Saving..." %>
</form>

## Awesomplete multi-select script:
<script >
  new Awesomplete('input[data-multiple]', {
    filter: function(text, input) {
      return Awesomplete.FILTER_CONTAINS(text, input.match(/[^,]*$/)[0]);
    },
    item: function(text, input) {
      return Awesomplete.ITEM(text, input.match(/[^,]*$/)[0]);
    },
    replace: function(text) {
      var before = this.input.value.match(/^.+,\s*|/)[0];
      this.input.value = before + text + ", ";
    }
  });
</script>

Unfortunately, typing in the Tag input doesn’t display any auto-suggest with tags.
Anyone has ideas on how to get auto-suggest working without Liveview-specific client-server overhead?

Marked As Solved

sfusato

sfusato

Make sure you are also adding an ID to the div with phx-update="ignore".

When using phx-update , a unique DOM ID must always be set in the container. If using “append” or “prepend”, a DOM ID must also be set for each child.

Also Liked

LostKobrakai

LostKobrakai

Liveview does update your input tag each time you change the value. Try setting it to phx-update="ignore".

Also instead of 'input[data-multiple]' you should attach to this.el. Given that the liveview DOM can change partially you should attach js functionality on a per element basis not globally. You can’t just once apply awesomplete to all your input, but you need to attach it to each input when it comes up and likely also destroy the instance when the input it removed from the page.

dalerka

dalerka

Ah, thank you, missed this one and it did the trick!
So, the Awesomplete library is working as expected now.

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
beno
I will often find my self writing things similar to: case some_value do nil -&gt; something() "" -&gt; something() _ -&gt; somethi...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29603 241
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36352 110
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 48342 226
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement