Guides
Using a select picker plugin with ajax search
If you are using a JS plugin for <select>
(e.g. Ajax-Bootstrap-Select)
and you want to enable ajax search, you have to do these steps:.
Add a
without_choices: true
option. From now only already selected<option>
’s will be rendered in the<select>
field.form |> add(:customer, :select, without_choices: true )
Add a
:choice_label_provider
function. This function receives a value from selected<option>
and returns proper label.Note: If you are using
SelectAssoc
fromFormex.Ecto
, then this function is automatically implemented.form |> add(:customer, :select, without_choices: true, choice_label_provider: fn id -> # get a label for this id from database or another source Repo.get(Customer, id).name end )
Put code that is required by your JS plugin. Example for Ajax Bootstrap Select:
form |> add(:customer, :select, without_choices: true, choice_label_provider: fn id -> # get a label for this id from database or another source Repo.get(Customer, id).name end, phoenix_opts: [ class: "select", data: [ live_search: true, abs_ajax_url: "YOUR URL", # ... other ajax bootstrap select options ] ] )
$('.select').selectpicker().ajaxSelectPicker()
(Optional) If you are using the
SelectAssoc
, use SelectAssoc.search/3 function inside your controller.