尝试向 Joomla 4/Yootheme 添加自动完成选择

Question

我有一个带有重定向的 select 字段，它工作正常，但是，selection 将有超过 100 个项目，所以我也想给它一个自动完成功能。我尝试了几种解决方案，但无法使它们起作用。 Jquery好多年没用了，手艺严重欠缺

到目前为止我有以下内容，效果很好，现在我只想为用户添加一个自动完成功能，任何帮助将不胜感激。

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

如果您对 jQuery 不是很熟悉，最好的选择是使用 jQuery UI 及其自动完成小部件。 90% 的工作已经完成。您可以查看他们的文档以获取更多信息。

这是一个让您入门的示例：

$(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 到 jQuery 自动完成：https://jqueryui.com/autocomplete/

尝试向 Joomla 4/Yootheme 添加自动完成选择

Trying to add an autocomplete selection to Joomla 4/Yootheme

joomla

jquery-ui-autocomplete

yoothemes