如何在未選擇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>