Question

我正在测试具体化的自动完成功能，但由于某种原因它无法正常工作。

这是我的代码：

<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完成了），该JS读取输入标签并与alldata对象进行比较，并在其不在对象中的情况下将其删除。它监听Materialize 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>

Answer 2

您在代码中犯了一些小错误

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

上面的代码行包含两个class属性，第二个class属性没有被考虑在内，只需将所有类合并到一个类属性中。

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

实现自动完成功能并不起作用

2 个答案: