Select with search in Phoenix template

I’ve used Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou once. It was okay.

If your list of items is very big, I recommend my own library which enhances Lea Verou’s awesomplete widget. It supports dynamic remote data loading using ajax queries.
The phoenix helper for this is available in hex: phoenix_form_awesomplete | Hex
You will have to make a rest service that returns the search results in json format. This is easy in Phoenix.

That’s exactly what I was looking for. Many thanks!

I’ve found some solace in the Select2 box for JQuery

using some Phoenix like this (the select2 will change the select boxes with certain ids with JS)

<!-- <%= select f, :item_id, @items, id: "single", class: "form-control", single: true % > -->

You will need to get Select2 working in a MWE (Minimum Working Example) context first.

I’ve personally downloaded the css and made it a file in my project to get this to work. I also added an override file in case we need to update the main file in the future, so as to get the css I want but also not have to deal with file diffs later.

The reason I’m not using awesomeplete is because it didn’t seem to support a data list of maps. I needed that so that the form could read the select input as an id and just associate it by updating the association id through a create form. If you just need one value, awesomeplete will be 10x easier but for associations you will likely have to use select2. that is if the maintainers of awesomeplete don’t add support for lists in this way.

Here is an example of the way my input box looks and it does function appropriately by passing in the ID instead of the name, the black boxes are for obvious obfuscation.

Screen Shot 2021-08-04 at 12.31.06 PM471×371 3.15 KB