如何在未选择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>