Jquery 自定义自动完成以按类别或标签搜索

Question

我正在尝试创建自定义 JQUERY 自动完成搜索，以便用户可以按标签或国家/地区进行搜索。如果他们输入一个国家，那么该国家内的所有标签都应该出现。我正在尝试复制 this 搜索。经过大约 2 天的尝试，我正在寻求任何提示。这是我目前的代码。

function addautcomplete() {
          data= [
          {label:"A",country:"Ar"},
          {label:"B",country:"Ar"},
          {label:"C",country:"Ar"},
          {label:"1",country:"Br"},
          {label:"2",country:"Br"},
          {label:"3",country:"Br"}];

          $.widget("custom.combobox", $.ui.autocomplete, {
            _select: function(event, ui ) {
              $( "#search" ).val( item.country );
              $( "#search" ).val( item.label );
            },
            _create: function() {
              this._super();
              this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );


            },
            _renderMenu: function (ul, items) {
              var that = this, currentCategory = "";
              ul.append("<li' class='search_country_title'> Type your selection"+  "</li> ");
              $.each(items, function (index, item) {
                console.log(item);

                  if (item.country != currentCategory) {
                      ul.append("<li id='selected_geography2' value=" +item.reg_id+ ">" + item.country + "</li> ");
                      currentCategory = item.country;
                  }
                      that._renderItemData(ul, item);
                      //li = that._renderItemData( ul, item );
                  });
              }
          });

          $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            var t = "<p><span'>" + item.label+"</span>"+"</p>" ;
              return $("<li></li>")
                  .data("item.autocomplete", item.label)
                  .append("<a  id='selected_geography3' value='" +item.reg_id+ "'>" + t + "</a>")
                  .appendTo(ul);
          };
          $("#search").combobox({
              minLength: 0,
              source: data,
              focus: function( event, ui ) {
                $( "#search" ).val( ui.item.label );
                return false;
              }
            });

        };

.custom-combobox {
         position: relative;
         display: inline-block;
       }
       .custom-combobox-toggle {
         position: absolute;
         top: 0;
         bottom: 0;
         margin-left: -1px;
         padding: 0;
       }
       .custom-combobox-input {
         margin: 0;
         padding: 5px 10px;
       }

<html lang="en">
      <head>   
      </head>
       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
    <script>
          $(document).ready(function() {
            addautcomplete();
          });

        </script>
        
      <body id='Mybody'>
        <input id='search'> </input>

     
      </body>
</html>

谢谢，

Answer 1

提供的 link 中的示例使用名为 select2, which I think does exactly what you want in this example: https://select2.org/dropdown

的 jQuery 插件

Jquery 自定义自动完成以按类别或标签搜索

Jquery custom autocomplete to search either by category or label

jquery

autocomplete

jquery-ui-autocomplete