LiveView in just a template for search?

Hello,

I’m fairly new to phoenix/elixir and very new to live-view. I’m setting up a basic form and one of the fields, lets say city. Normally I’d write javascript to call back to the server when you type in the search field, update the matched options, and then set a hidden field or whatever when you select one.

Is it possible to use live view for this, but not for the entire page? I’d was trying to add it to just a template and then render that template in my form, but that’s not working.

Is this possible and if so, am I approaching it correctly?

Thanks!

1 Like

Hello there
It’s hard to say what you may be doing wrong without code samples. Have you confirmed you have liveview setup correctly? This is a demo projects list you can use for reference which has a search widget included

And I would definitely make sure using a liveview setup tutorial that it’s all wired up first. LiveView is still pre-release. What you are attempting to do is definitely possible though. It’s a common use case to only have a subsection of a page be live.

Hi @jbailey - welcome to the forums!

Is there any reason why you want the form to be a normal page? I think you would find things a whole lot easier if you moved the entire form into the liveview as passing data out of a liveview does get tricky - the liveview state is pretty self-contained. Building a liveview based form is no more difficult than normal controller code, just a slightly different way of thinking and you get a few bonus extras for your troubles, like real-time input validation. The project that @subetei references has an example.

Currently I’d not suggest using liveview for parts of a form, unless you really can do without serializing the FormData struct usually named f in your liveview. Phoenix.HTML can work without it, but it’s a lot more manual work for setting values, default, errors and stuff like that.

It doesn’t need to be the whole page though. Just the whole form should work fine.