autocomplete field

aircox_streamer/templates/aircox_streamer/source_item.html

@@ -53,8 +53,13 @@
                     {# TODO: select station => change the shit #}
                     <a-autocomplete class="is-fullwidth"
                         url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
-                        name="sound_id" :model="Sound" field="path" value-field="id"
-                        placeholder="{% trans "Select a sound" %}" />
+                        name="sound_id" :model="Sound" label-field="name"
+                        placeholder="{% trans "Select a sound" %}">
+                            <template v-slot:item="{item}">
+                                [[ item.data.name ]]
+                                <span class="is-size-7 is-italic has-text-info">[[ item.data.file ]]</span>
+                            </template>
+                        </a-autocomplete>
                     <p class="help">
                     {% trans "Add a sound to the queue (queue may start playing)" %}
                     </p>