Automatické dokončování uživatelského rozhraní jQuery

Používám plugin pro automatické doplňování uživatelského rozhraní jQuery a vše je v pořádku, kromě toho, že když uživatel klikne hodnota, kterou chtějí, funkce, kterou jsem přiřadil metodě „select:“, se spustí před změnou hodnoty pole. Pokud tedy do vstupního pole napíšu „Foo“, pak kliknu na shodu automatického doplňování pro „Foo Bar“, funkce detekuje hodnotu jako zadanou (v tomto případě „Foo“) na rozdíl od hodnoty, která byla vybrána z automatického doplňování. seznam. Jakmile se funkce spustí (v tomto případě mám pouze vyskakovací okno s upozorněním s this.value ) hodnota vstupního pole je nastavena na hodnotu zvolenou prostřednictvím seznamu automatického doplňování. Tento problém není nastane, pokud uživatel vybere možnost pomocí klávesnice (klávesy se šipkami->tab), pouze když je použita myš.

  $(function()
  {
    var aEmps = 
    [
<?php
echo $sEmps;
?>    
    ];

    $("#slast").bind( "keydown", function( event ) {
      if ( event.keyCode === $.ui.keyCode.TAB &&
          $( this ).data( "autocomplete" ).menu.active ) 
          { event.preventDefault(); }
    })
    .autocomplete({
      source: aEmps,
      select: function(event, ui)
      {
        var aName = $(this).val();
        alert(aName);
      }
    })
  });

Protože většina uživatelů s tím bude pracovat pomocí myši, musím najít způsob, jak získat nastavenou hodnotu před spuštěním funkce „vybrat:“. Věřím, že se tomu dokážu přizpůsobit přidáním podmínky do příkazu před automatickým dokončením, ale potřebuji pomoc s nalezením správné syntaxe.

Odpověď

Po vyzkoušení řady přístupů jsem zjistil, že jednoduchým navázáním funkce zpětného volání na zavřít akce funguje velmi dobře. Přidal jsem nějaké zpracování chyb, abych zachytil hodnoty, které nejsou vybrány ze seznamu, a jsem vypnutý!

Zde je aktualizovaný kód:

  $(function()
  {
    var aEmps = 
    [
<?php
echo $sEmps;
?>    
    ];

    $("#slast").bind( "keydown", function( event ) {
      if ( event.keyCode === $.ui.keyCode.TAB &&
          $( this ).data( "autocomplete" ).menu.active ) 
          { event.preventDefault();}
    })
    .autocomplete({
      source: aEmps,
      close: function(event, ui)
      {
        alert(this.value);
      }      
    })
  });