Autocomplete 'no results found' option

[BorisKamp]

Hi guys!

Right now when you start typing, and no result is found, there is no feedback shown to the user. It would be nice if we could show a greyish label inside the <el-options> container with No results found for example?

Ideally we'd add a <no-results-placeholder> element inside the <el-options> element, so that we can style it ourselves. I've tried this a bit with a div inside like this:

           .......
            <div v-if="filteredItems.length === 0" class="relative cursor-pointer rounded-md select-none py-2 pl-3 flex items-center gap-2 text-gray-900 hover:bg-brandgreen hover:text-white aria-selected:bg-brandgreen aria-selected:text-white">
              {{ t('No options available') }}
            </div>
          </el-options>
        </el-autocomplete>

but that did not work.

[philipp-spiess]

@BorisKamp Hey! Thanks for the ticket.

We don't have that right now because we modeled the autocomplete component after the native https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist component – it's basically thought of enhancing a text input field with some optional predefined values while still being a totally valid text field for random text. in that context "not picking an item from the list" is not considered a failure case that's why we didn't add any UI around it. Would love to learn more about the UX you have in mind! I'm asking because I wonder if you'd rather want a searchable select instead of a new API inside autocomplete.

One thing that I can see us doing is to give you more fine-grained control over what items show in the list. Do you think that would help? You could ensure one option is always visible and make it disabled so it can't be selected/picked.