How to create autocomplete form with MaterializeCss?

后端 未结 9 2143
死守一世寂寞
死守一世寂寞 2021-02-19 14:13

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

相关标签:
9条回答
  • 2021-02-19 14:42

    As mentioned above, autocomplete has been added the the materialize framework but it is still pretty limited. I'm waiting for a solution that supports values (ex Ids) icons and text.

    Re: https://github.com/Dogfalo/materialize/issues/4086

    0 讨论(0)
  • 2021-02-19 14:50

    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 = '<ul class="autocomplete-content hide">';
    
            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 += '<li class="autocomplete-option"><img src="' + $array[i]['path'] + '" class="' + $array[i]['class'] + '"><span>' + $array[i]['value'] + '</span></li>';
              } else {
                $html += '<li class="autocomplete-option"><span>' + $array[i]['value'] + '</span></li>';
              }
            }
    
            $html += '</ul>';
            $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("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
              });
            }
    
            // 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;
    
    }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.css" rel="stylesheet" />
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    
    <div class="row">
      <div class="input-field col s12">
        <label class="active">State</label>
        <input type="text" id="autocompleteState" class="autocomplete inputFields">
    
      </div>
    </div>
    
    
    <script>
      var stateData = [{
        value: "Alabama"
      }, {
        value: "Alaska"
      }, {
        value: "Arizona"
      }, {
        value: "Arkansas"
      }, {
        value: "California"
      }, {
        value: "Colorado"
      }, {
        value: "Connecticut"
      }, {
        value: "District of Columbia"
      }, {
        value: "Delaware"
      }, {
        value: "Florida"
      }, {
        value: "Georgia"
      }, {
        value: "Hawaii"
      }, {
        value: "Idaho"
      }, {
        value: "Illinois"
      }, {
        value: "Indiana"
      }, {
        value: "Iowa"
      }, {
        value: "Kansas"
      }, {
        value: "Kentucky"
      }, {
        value: "Louisiana"
      }, {
        value: "Maine"
      }, ];
    
      $('#autocompleteState').data('array', stateData);
    </script>

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

    0 讨论(0)
  • 2021-02-19 14:50

    UPDATED 1/09/2016: Autocomplete is already available officially: http://materializecss.com/forms.html#autocomplete


    I was looking for exactly the same and I think We have been lucky. They added the autocomplete recently, (not yet in the documentation). But you can see the info here https://github.com/SuperDJ/materialize/commit/3648f74542e41c3b3be4596870b7485f6ebdf176#diff-e4535828acef79852aa104417c16fe3dR157

    and the code:

    • https://github.com/SuperDJ/materialize/blob/master/bin/materialize.css

    • https://github.com/SuperDJ/materialize/blob/master/bin/materialize.js

    0 讨论(0)
提交回复
热议问题