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.exlooks 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
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
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
Ah, thank you, missed this one and it did the trick!
So, the Awesomplete library is working as expected now.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance










