Aide avec jQuery UI Autocomplete avec possibilité de TAB

Question

J'ai écrit un code jQuery pour activer la saisie semi-automatique dans un champ de saisie.

J'ai deux problèmes avec cela que je n'arrive pas à résoudre.

1. Tabulation loin du champ ne remplira pas l'entrée. Ce dont j'ai besoin est pour la suggestion FIRST de remplir le champ si rien n'est sélectionné (cliqué ou sélectionné via haut/bas) OU pour l'élément en surbrillance à remplir dans le champ. (note: la mise en évidence se fait via les flèches haut/bas)
2. Lorsque vous utilisez les flèches haut/bas, j'ai besoin de l'entrée pour afficher le "LABEL" et non le "VALUE" En appuyant sur haut/bas, l'entrée sera la valeur.

Tout conseil sera grandement apprécié.

Voici mon terrain d'essai JSBIN.
http://jsbin.com/iyedo3/2

Note: le champ <input id="dummy" /> est juste là pour vous donner quelque chose à « onglet » vers. Si elle est supprimée, la zone d'aide est développée.

Answer 1

Je pense que j'ai compris cela. En utilisant l'aide jQuery saisie semi-automatique

$(function() { 
    $(label_element).autocomplete({ 
     source: json_string, 
     selectFirst: true, 
     focus: function (event, ui) { 
      return false; 
     }, 
     select: function (event, ui) { 
      $(value_element).val(ui.item.value); 
      $(label_element).val(ui.item.label); 
      return false; 
     } 
    }); 
}); 

Et ce qui suit Sélectionnez premier script

(function ($) { 

    $(".ui-autocomplete-input").live("autocompleteopen", function() { 
     var autocomplete = $(this).data("autocomplete"), 
     menu = autocomplete.menu; 

     if (!autocomplete.options.selectFirst) { 
      return; 
     } 

     menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first()); 
    }); 

} (jQuery)); 

Maintenant où je dois ajouter autocomplete, je viens de l'utiliser.

<script type="text/javascript"> 
     var json_string = // My Autocomplete JSON string. 
     var label_element = "#RegionName"; 
     var value_element = "#RegionID"; 
</script>