I want to check a value after a user finished with filling the input field against a list of accepted values. I am using autocomplete. The issue I am facing is that
Once
after user finished with entering the value. At this point my function evaluates that the value entered is not allowed. Then once autocomplete changes the value to the value selected by user, my checking function is triggered again and now it entered value is recognised as correct.Of course this is not the right behaviour of my application. I need to check the value in both cases when typed or when autocomplete is used. The input field is part of a form so I can evaluate after submit but the form is quite complex and I want to let user know that the value is NOT accepted immediately.
Working jsFiddle.
javascript code
var elemOptions = {
data: {
"Radek Surname ": null,
"Radek": null,
"Radoslav": null
},
minLength : 2,
}
var elemAutomplete = document.getElementById('autocomplete-input1')
var autocomplete = M.Autocomplete.init(elemAutomplete, elemOptions);
var names = { "Radek": null, "Radoslav":null}
function checkName(){
var result = false
var name = document.getElementById("autocomplete-input1")
console.log(name.value.trim())
console.log(!(name.value.trim() in names))
if (!(name.value.trim() in names) ){
var errorText = "accepting values from autocoplete only"
name.value = ""
result = false
console.log(errorText)
}else{
result = true
}
return result
}
If you type Rade and then select Radek from autocomplete you get
"Rade"
true
"accepting values from autocoplete only"
"Radek"
false