Guides

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:.

  1. 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
    )
  2. Add a :choice_label_provider function. This function receives a value from selected <option> and returns proper label.

    Note: If you are using SelectAssoc from Formex.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
    )
  3. 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()
  4. (Optional) If you are using the SelectAssoc, use SelectAssoc.search/3 function inside your controller.