jquery - Materialise 自动完成不起作用

Question

我正在测试 Materialize 的自动完成功能，但由于某种原因它不起作用。

这是我的代码:

<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>

我已经用另一种形式对此进行了测试，由于某种原因，当我尝试这样做时它确实有效:

<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>

我已经尝试了几种方法，但由于某种原因它不起作用。

Answer 1

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);
            }
        }

您需要添加一小段 JS(我已经使用 jquery 完成)来读取输入标记并与 alldata 对象进行比较，并在其不在对象中时将其删除。它监听 Materialise onChipAdd 事件。

<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>