problème jQuery autocomplete - ne correspond pas si l'utilisateur n'a pas spécifiquement sélectionnez

Question

Suite à mes deux questions précédentes:

How to make jQuery autocomplete execute a search() when user hits submit

How would I trim the input to a JQuery auto-complete box?

J'ai une boîte de saisie semi-automatique jQuery UI 1.8 dans mon forme, et pour la plupart, cela fonctionne comme un charme. Le seul problème que j'ai est que si j'entre un nom valide, mais ne sélectionne pas le choix qui apparaît, alors le nom n'est jamais assorti à ma liste {name,value} et donc la valeur correcte pour l'entrée cachée qui contient la 'valeur' la partie n'est pas définie. Cela provoque bien sûr la situation confuse où l'on peut entrer un nom que vous connaissez est correct, cliquez sur soumettre et être dit que vous n'avez pas entré un nom correct (comme la valeur est null).

Comment puis-je m'assurer que la valeur d'entrée masquée est définie même si l'utilisateur ne fait pas un choix dans la zone de saisie semi-automatique? Y a-t-il une fonction que je peux lier à l'événement onclick du bouton submit qui ferait jQuery faire une recherche avec ce qui est dans la boîte et sélectionner automatiquement la première option? Sinon, puis-je faire en sorte que la saisie semi-automatique sélectionne la première option lorsque l'utilisateur désélectionne la boîte de saisie de quelque façon que ce soit (retour/tab/click off/etc)?

Merci.

Answer 1

Voici ma solution à votre problème. Je viens d'ajouter la partie concernant l'événement changement. J'espère que ça aide.

jQuery(function(){ 
    jQuery('#Resource').autocomplete({ 
     source: data, 
     focus: function(event, ui) { 
      jQuery('#Resource').val(ui.item.label); 
      return false; 
     },   
     select: function(event, ui) { 
      jQuery('#Resource').val(ui.item.label); 
      jQuery('#EmployeeNumber').val(ui.item.value); 
      return false; 
     }, 
     change: function(event,ui){ 
       for (var i in data){ 
        if (data[i].label==jQuery('#Resource').val()){ 
         jQuery('#EmployeeNumber').val(data[i].value); 
        } 
       } 
     } 
    }); 
});