<input list>: diferenciando a opção escolhida com o que foi digitado

[Frank K Hosaka]

No ano passado, eu desisti de usar o <input list>. Ele é um dos recursos mais bacanas do HTML, mas eu não sabia como diferenciar a opção do que foi escolhido com o que foi digitado.

Vamos supor que no banco de dados eu tenho limao e limão, mas o safado do usuário colocava laranja. Todo o meu código ficava travado, tudo porque a laranja não estava previsto no banco de dados, e assim não havia como fazer o orçamento.

Hoje eu tive a brilhante ideia de como contornar o safado do usuário, eu coloquei um espaço na lista de opções. Agora eu sei quando o usuário escolheu uma opção ou inventou coisa que não foi previsto:

<script>
function ver(value){
  escolhido.value="";digitado.value=""
  if(value[0]==" "){escolhido.value=value} else {digitado.value=value}
  ipfruta.value=""}
</script>
<?php
$bd=["limão"=>2,"limao"=>1]; ?>
<input list=fruta id=ipfruta onchange=ver(value)>
<datalist id=fruta>
  <?php foreach($bd as $key=>$value){
    echo "<option value=' $key $value'>";} ?>
</datalist>
<p>Escolhido<input id=escolhido></p>
<p>Digitado<input id=digitado></p>