I have a Live Component with an autocomplete search input. I’m using phx-change on the text input as an attribut to send an event to look up entries in the database matching the user input. I’m also using phx-change on the form level to real-time validating all the form inputs and that works well. However, the autocomplete input is not getting validated as it is overriding the behaviour of the phx-change to send a search event instead of validating process. The problem is that I set the autocomplete as a required field and if the user omit it or delete it’s input, it should then get an error feedback as with other required fields.
Here is my autocomplete LC and I’m using AlpineJs to open or close the list of matching entries :
If you use phx-change on a specific input, only that input’s value will be sent to the server when the change event fires. So if you’re using this to trigger a search (which I assume will be used to fill your dropdown of selectable options) you can’t also use it to validate the entire form.
The autocomplete field shouldn’t probably be part of the form’s values that get validated. It’s a sort of “helper” input, only used to record what the user is typing and search for options. Those options can be selected, and the one the user select should be sent as part of the real form’s inputs. This could be accomplished using a hidden input.
Another possibility is having the autocomplete field be part of the validated form inputs, and selecting one of the options would replace the content of the field with the option and trigger a change. In this case however you can’t use phx-change to trigger the search (but you can use phx-keyup for example as you already mentioned). Also, you’ll have to trigger the change from JS.
It allows you to add an autocomplete input to your form with a few lines of code. If you decide that it doesn’t suit your needs, I’d be interested in knowing why so I can improve it (the best thing would be to open an issue). Even so, you can use the code as an inspiration for your component. All the problems you’re trying to solve should have already been solved there.
@trisolaran thanks for your help. Ok, now I understand better the concept behind phx-change on a specific input. The reason why I want my input to be validated is because the end user should either select an option if it exists or create a new one (to be stored as new entry in database) if doesn’t. In any case the field can’t be blank.
I would have liked to know that your component exist ! because as you mentioned, it’s really difficult to build an autocomplete input as I spent a lot of time to build it, but I will take a look and see if it can fit better my need.