0

我有一个带有重定向的选择字段，可以正常工作，但是，选择将有超过 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>
4

1 回答 1

0

如果您对 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");
   });
});

链接到 jQuery 自动完成：https ://jqueryui.com/autocomplete/

于 2021-12-14T17:57:51.260 回答