Trying to add an autocomplete selection to Joomla 4/Yootheme

Question

I have a select field with a redirect that works okay, however, the selection will have over 100+ items so I'd like to give it an autocomplete feature as well. I've tried several solutions but can't get them to work. I haven't used Jquery for years and my skills are seriously lacking.

So far I have the following, which works great, now I would just like to add an autocomplete to it for the user's benefit, any help would be much appreciated.

HTML

<select class="uk-select" id="occupation_select">
  <option value="" selected>Select Occupation</option>
  <option value="/avon">Avon</option>
  <option value="/amway">Amway</option>
  <option value="/body-shop">Body Shop</option>
</select>

<script>
    $(function(){
      // bind change event to select
      $('#occupation_select').on('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

Answer 1

If you aren't very familiar with jQuery the best option would be to use jQuery UI and their autocomplete widget. 90% of the work is done. You can look through their documentation to get more info.

This is an example to get you started:

$(function () {
   var availableTags = [{
       label: "Avon",
       value: "/avon",
   }, {
       label: "Amway",
       value: "/amway",
   },
   {
       label: "Body Shop",
       value: "/body-shop",
   }];
   $('#uinput').autocomplete({
       source: availableTags,
       minLength: 0,
       select: function (event, ui) {
          var url = ui.item.value;
          if (url) { // require a URL
             window.location = url; // redirect
          }
          return false;
       }
   }).focus(function () {
       $(this).autocomplete("search");
   });
});

Link to jQuery Autocomplete: https://jqueryui.com/autocomplete/