How to create autocomplete form with MaterializeCss?

Question

I am looking for autocomplete form for MaterializeCss, any plugins for this? i has try to use select2 but that\'s css not looks good

Answer 1

Materialize is an awesome library, I was able to get it to work.

$('document').ready(function() {

  var input_selector = 'input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=search], textarea';
  
  
/**************************
* Auto complete plugin  *
*************************/
  
  
  $(input_selector).each(function() {
    var $input = $(this);

    if ($input.hasClass('autocomplete')) {
      var $array = $input.data('array'),
        $inputDiv = $input.closest('.input-field'); // Div to append on
      // Check if "data-array" isn't empty
      if ($array !== '') {
        // Create html element
        var $html = '
';

        for (var i = 0; i < $array.length; i++) {
          // If path and class aren't empty add image to auto complete else create normal element
          if ($array[i]['path'] !== '' && $array[i]['path'] !== undefined && $array[i]['path'] !== null && $array[i]['class'] !== undefined && $array[i]['class'] !== '') {
            $html += '
' + $array[i]['value'] + '
';
          } else {
            $html += '
' + $array[i]['value'] + '
';
          }
        }

        $html += '
';
        $inputDiv.append($html); // Set ul in body
        // End create html element

        function highlight(string) {
          $('.autocomplete-content li').each(function() {
            var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
              matchEnd = matchStart + string.length - 1,
              beforeMatch = $(this).text().slice(0, matchStart),
              matchText = $(this).text().slice(matchStart, matchEnd + 1),
              afterMatch = $(this).text().slice(matchEnd + 1);
            $(this).html("" + beforeMatch + "" + matchText + "" + afterMatch + "");
          });
        }

        // Perform search
        $(document).on('keyup', $input, function() {
          var $val = $input.val().trim(),
            $select = $('.autocomplete-content');
          // Check if the input isn't empty
          $select.css('width',$input.width());

          if ($val != '') {
            $select.children('li').addClass('hide');
            $select.children('li').filter(function() {
              $select.removeClass('hide'); // Show results

              // If text needs to highlighted
              if ($input.hasClass('highlight-matching')) {
                highlight($val);
              }
              var check = true;
              for (var i in $val) {
                if ($val[i].toLowerCase() !== $(this).text().toLowerCase()[i])
                  check = false;
              };
              return check ? $(this).text().toLowerCase().indexOf($val.toLowerCase()) !== -1 : false;
            }).removeClass('hide');
          } else {
            $select.children('li').addClass('hide');
          }
        });

        // Set input value
        $('.autocomplete-option').click(function() {
          $input.val($(this).text().trim());
          $('.autocomplete-option').addClass('hide');
        });
      } else {
        return false;
      }
    }
  });






});

.autocomplete-content {

  position: absolute;

  background: #383838;

  margin-top: -.9rem;

}

.autocomplete-content li {

  clear: both;

  color: rgba(0, 0, 0, 0.87);

  cursor: pointer;

  line-height: 0;

  width: 100%;

  text-align: left;

  text-transform: none;

  padding: 10px;

}

.autocomplete-content li > span {

  color: #ffa726;

  font-size: .9rem;

  padding: 1.2rem;

  display: block;

}

.autocomplete-content li > span .highlight {

  color: #000000;

}

.autocomplete-content li img {

  height: 52px;

  width: 52px;

  padding: 5px;

  margin: 0 15px;

}

.autocomplete-content li:hover {

  background: #eee;

  cursor: pointer;

}

.autocomplete-content > li:hover {

  background: #292929;

}

  

    State
    

  

Hope this helps people who are new to this just like me.:)