CODEWITHSUNDEEP
jqueryautocompletejquery-ui-autocompletematerialize
Mixedfruitjuice
Mixedfruitjuice

Reputation: 83

Materialize autocomplete doesn't work

I'm testing the autocomplete of materialize but it doesn't work for some reason.

here's my code:

<link type="text/css" rel="stylesheet" href="css/style.css"/>
<title>Stamboom</title>
<link rel="stylesheet" href="css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

       <div class="input-field">
                    <input class="purple darken-4" id="autocomplete-input" class="autocomplete" type="search">
                    <label for="autocomplete-input"><i class="material-icons">search</i></label>
                    <i class="material-icons">close</i>
       </div>
<script>
$(document).ready(function(){
$('input.autocomplete').autocomplete({
  data: {
    "Apple": null,
    "Microsoft": null,
    "Google": 'http://placehold.it/250x250'
  }
});
});
</script>

I've tested this with another form and for some reason it does work when I try this:

<div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
<script>
    $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'http://placehold.it/250x250'
      }
    });
    });
    </script>

I've tried several things and for some reason it just doesn't work.

Upvotes: 4

Views: 5788

Answers (2)

Er Deepak Prabhakar
Er Deepak Prabhakar

Reputation: 458

onChipAdd: function(e, chip){
            var item = chip.childNodes[0].textContent;
            if(alldata[item] !== null){
                $('.chips-autocomplete .chip').last().remove();
            }
            else{
                tags.push(item);
                $('#tags').val(tags);
            }
        }

You need to add a small piece of JS (I have done with jquery) that reads the input tag and compares with alldata objects and removes in case its not in the object. It listens to Materialize onChipAdd event.

<div class="custom-chips">
    <div class="chips chips-autocomplete"></div>
    <input type="hidden" id="tags" >
    </div>
    <script>
    jQuery(function($){
    var tags =[];
    var alldata = {
        'Apple': null,
        'Microsoft': null,
        'Google': null
    }

    $('.chips-autocomplete').chips({
    autocompleteOptions: {
    data: alldata,
    limit: Infinity,
    minLength: 1,
    },
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
    onChipAdd: function(e, chip){
        var item = chip.childNodes[0].textContent;
        if(alldata[item] !== null){
            $('.chips-autocomplete .chip').last().remove();
        }
        else{
            tags.push(item);
            $('#tags').val(tags);
        }
    },
    onChipDelete: function(e, chip){
        var item = chip.childNodes[0].textContent;
        tags = $.grep(tags, function(value) {
            return value != item;
        });
        $('#tags').val(tags);
    }
    });
    }); 
    </script>

Upvotes: 2

Kandarp Kalavadia
Kandarp Kalavadia

Reputation: 492

You have made minor mistake in your code 

<input class="purple darken-4" id="autocomplete-input" class="autocomplete" type="search">

Above line of code contain two class attribute and second class attribute is not taken into account, Just combine all classes in one class attribute.

<input class="purple darken-4 autocomplete" id="autocomplete-input" type="search">


$(document).ready(function(){
  $('input.autocomplete').autocomplete({
    data: {
	  "Apple": null,
	  "Microsoft": null,
	  "Google": 'http://placehold.it/250x250'
	}
  });
});
<!DOCTYPE html>

<html>
<head>
<title>Stamboom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
</head>
<body>
    <div class="input-field">
	  <input class="purple darken-4 autocomplete" id="autocomplete-input" type="search">
	  <label for="autocomplete-input"><i class="material-icons">search</i></label>
	  <i class="material-icons">close</i>
	</div>
</body>
</html>

Upvotes: 1

Related Questions