Capable of searching colors within palette

Hii @abhaysaraf,

I have created MR #7 for this functionality. We can search by hex code or name of color.
Let me know if any changes are needed.
Thanks!

Hello @nidhi27, I was testing the feature and looks good generally. However I found I was not able to filter by name as expected, it is working filtering hexcodes but not for names. I suspect it is because JS code is trying to find "color-name-" class and it doesn't exist in the markup. Could it be because something is missing from the template?

I refactored it a little bit and now is working, could you please take a look?

if ($('.color-search-field').length) {
        $('.color-search-field').keyup(function() {
          var searchText = $(this).val().trim().toLowerCase();
          var hexCodeString = 'hexcode-' + searchText.replace(' ', '-');
          var regHex = new RegExp(hexCodeString, "i");
          $('.palette-colors .palette-colors-btn').each(function() {
            var classList = $(this).attr('class') || "";
            var colorLabel = $(this).find('.color-label').text().trim().toLowerCase();
            var matchesHex = regHex.test(classList);
            var matchesName = colorLabel.includes(searchText);
            $(this).toggle(matchesHex || matchesName);
          });
        }); 
      }

Hi @pgrandeg,

Extremely sorry for the inconvenience. I missed to add the class in template. Now we can search by name or hexcode. I have committed the latest changes. Kindly look into it.

Thanks!

Hello @nidhi27, I checked now and it works as expected! I will merge and create a new release 1.0.5 soon. Thank you

Automatically closed - issue fixed for 2 weeks with no activity.