当未选择Materialize.css自动完成时，如何运行函数？
当未选择Materialize.css自动完成时，如何运行函数？
提问于 2017-07-18 17:25:18
我正在尝试编写一个函数，该函数将在未选择Materialize.css自动完成选项时执行。这个是可能的吗？基本上，我希望在name字段中根据用户选择的自动完成选项自动添加一个电子邮件字段的值，这很好。但我也希望当用户输入自定义名称时，电子邮件值会消失，而且到目前为止，如果没有某种“清除”按钮，我无法让它工作。我尝试过编写这样的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,
});但这似乎不起作用，因为(我认为)这个函数只有在自动完成已经执行时才会运行？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-18 19:37:04
在特定情况下不需要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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45173410
复制相关文章
相似问题
腾讯云开发者
