javascript - 未选择 Materialize.css 自动完成时如何运行函数？

Question

我正在尝试编写一个函数，该函数将在未选择 Materialize.css 自动完成选项时执行。这可能吗？基本上，我想根据名称字段中用户选择的自动完成选项自动向电子邮件字段添加一个值，效果很好。但我也希望当用户输入自定义名称时该电子邮件值消失，到目前为止，如果没有某种“清除”按钮，我无法让它工作。我试过像这样写一个 if/else 语句:

$('input.autocomplete').autocomplete({
  data: {
    //Data options
  },
  limit: 20, 
  onAutocomplete: function(val) {
    if ( $("#personname").val() == "last name, first" ) {
      $("#personemail").val("email@business.com");
    }
    else {
      $("#personemail").val("");
    }
  },
  minLength: 1, 
});

但这似乎不起作用，因为(我认为)这个函数只有在自动完成已执行时才会运行？

Answer 1

在您的特定情况下不需要 onAutocomplete 函数。我处理它的方法是在 $("#personemail") 字段上创建一个监听器，该监听器将检查自动完成中是否存在值。

我创建了一些东西(我认为)可以解决您遇到的问题，请在 JSfiddle 上查看:

$(function() {
  $('#personname').val('last name, first'); // proof of concept, assuming a user would input this
  Materialize.updateTextFields(); // remove it and you can see the visual bug

  $('.autocomplete').autocomplete({
    data: {
      "apple": null,
      "banana": null,
      "yellow": null,
      "purple": null,
      "green": null,
      "blue": null
    },
    limit: 20,
    onAutocomplete: function(val) {
      if ($('#personname').val() == 'last name, first') {
        $('#personemail').val('email@business.com');
        Materialize.updateTextFields();
      }
    },
    minLength: 1,
  });

  $('#personname').change(function() {
    $("#personemail").val('');
  });
});

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet" />

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <i class="material-icons prefix">add</i>
        <input type="text" id="personname">
        <label for="personname">Name</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">textsms</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
      <div class="input-field col s6">
        <i class="material-icons prefix">personpin</i>
        <input type="text" id="personemail">
        <label for="personemail">Email</label>
      </div>
    </div>
  </div>
</div>