0

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>
Stan Byford
  • 3
  • 2

1 Answers1

0

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/

MPN7
  • 1,112
  • 1
  • 10
  • 13
  • Thanks, MPN7, funnily enough, I stumbled across this earlier today and it appears Joomla 4 doesn't like jquery UI, console logs the following error: Uncaught TypeError: $(...).autocomplete is not a function someone suggested to me that I should try replacing $ with jquery, but alas no luck. – Stan Byford Dec 14 '21 at 19:34
  • Okay, think I found the issue, Joomla 4 no longer uses jquery UI, so it should be just a case of loading the library and I should be good to go. I will test it out and if all is well will repost. – Stan Byford Dec 14 '21 at 19:48
  • Sorry for the late response, yes you usually need to include jQuery UI yourself as most frameworks don't include it. About the prescriptions, it gets better over time, but in the beginning it's a pain in the ass – MPN7 Dec 15 '21 at 09:24