How to customize jquery ui autocomplete?

Question

I am using jquery ui autocomplete, and for the list of terms that appears in the dropdown, is there a way so that you can categorize the terms? Basically what I want is: In the dropdown menu, depending on what category a term is from, its background color will be a certain color. Something like you define a dictionary like:

var dictionary = {"apple":"red", "banana":"yellow"};

Then, you pass this to the jquery ui autocomplete initializer, and the dropdown will have the terms apple having a red background color, and banana with a yellow background color.

Is this possible to do?

Thanks.

Community · Accepted Answer · 2020-06-20 09:12:55Z

This is entirely possible take a look at this Jquery-ui-Autocomplete Catagories

now the basic gist is this:

<style>
    .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
    }
</style>
<script>
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
       _renderMenu: function( ul, items ) {
             var that = this,
             currentCategory = "";
             $.each( items, function( index, item ) {
                 if ( item.category != currentCategory ) {
                      ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                      currentCategory = item.category;
                      }
                  that._renderItemData( ul, item );
             });
       }
   });
</script>
<script>
   $(function() {
   var data = [
     { label: "anders", category: "" },
     { label: "andreas", category: "" },
     { label: "antal", category: "" },
     { label: "annhhx10", category: "Products" },
     { label: "annk K12", category: "Products" },
     { label: "annttop C13", category: "Products" },
     { label: "anders andersson", category: "People" },
     { label: "andreas andersson", category: "People" },
     { label: "andreas johnson", category: "People" }
  ];

   $( "#search" ).catcomplete({
     delay: 0,
     source: data
    });
  });
</script>
</head>
<body> 
   <label for="search">Search: </label>
   <input id="search" />
</body>

Now what you want to do is change up the .ui-autocomplete-catagory CSS class to get the general idea of a category, in order to get specific categories to have different colors you will need to add their own CSS classes. You could use jQuery to do this or have them concretely added on the add of each categories in the ul.append() in the first script above.

Collectives™ on Stack Overflow

How to customize jquery ui autocomplete?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related