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

• if user types accepted value and does NOT use automplete everything is fine
• but if user types accepted value just partially and then uses autocomplete then the function I am using to check is triggered twice. 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