Ytukyg

I'm stuck in a form, I am wondering how can I display an image inside a select option.

Inputs will load text.

What I'm trying to do...

What is the best way to make this work inside the form?

This is what I've done.

So my code is this because <select><option><img href=""></option></select> wont work.

<div class="input-group mb-3">

  <input type="text" class="form-control" aria-label="Text input with dropdown button">

      <div class="btn-group">

      <button type="button" class="no-border btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">

        <span class="sr-only">Toggle Dropdown</span>

      </button>

      <div class="dropdown-menu " aria-labelledby="dropdownMenuReference" style="position: absolute;transform: translate3d(-352px, 35px, 0px);min-width: 380px;overflow-x: hidden;" x-placement="bottom-start">

         @foreach($categories as $category)

        <a class="dropdown-item" href="#"><img class="rounded" src="/storage/category-icon/{{$category->business_icon}}">{{$category->business_name}}</a>

        @endforeach

      </div>

    </div>

</div>

What is the best practice for this?
(using bootstrap 4 and laravel btw)

Since it is not possible to do that with native HTML elements, you cannot make it work without Javascript. Therefore you at least need a hidden input field (<input name="foo-bar-baz" type="hidden value="…" />) to transfer the data between the server and the client. The data could be a simple serialized JSON Object like so:

[

  {

    "label": "Click ME",

    "icon": "/img/icon.png",

    "value": "item-xxx"

  },

  …

]

Going from there you need to write some Javascript code that generates something that looks like a <select> but isn't. Each change on that »virtual field« needs to modify the respective hidden one's value, such that at submission, the correct value is transferred to the server.

Here I could find an example based on bootstrap, maybe that is helpful. It renders a <ul><li></li>…</ul> list to display the »virtual field«.

One possible solution maybe found here.

To sum up, you need to find a proper Javascript library that helps you doing it, or write some code by yourself to make it. Which one to choose strongly depends on your needs and requirements.

Another thing to keep in mind here is accessibility — what should happen if the user has Javascript disabled, or uses a browser that has problems to execute the code provided. Then it might be a good starting point to render a regular <select> and use data attributes to inject images like so:

<select name="foo-bar-baz">

 <option value="value" data-icon="/path/to/icon">Label</option>

</select>

which yields a working form element, which then can be enriched with icons, in case Javascript works properly.

So to answer the question: IMHO best practice is the solution which always works and doesn't exclude users without Javascript, a screen reader or a text-based browser. So the solution provided above, starting with a regular <select>, which should be progressively enhanced, is what I would call best practice here.