jQuery AutoComplete Auswahl Feuern nach Änderung?

Question

Ich verwende die jQuery UI AutoComplete control (gerade aktualisiert zu jQuery UI 1.8.1). Wenn der Benutzer das Textfeld verlässt, möchte ich den Inhalt des Textfelds auf einen bekanntermaßen guten Wert setzen und ein ausgeblendetes ID-Feld für den ausgewählten Wert festlegen. Darüber hinaus möchte ich die Seite zurückgeben, wenn der Inhalt des Textfelds geändert wird.

Momentan implementiere ich dies, indem ich das Autocomplete-Select-Event die versteckte ID gesetzt habe und dann ein Change-Event auf das Textfeld setze, das den Textbox-Wert setzt und gegebenenfalls einen Post zurückbringt.

Wenn der Benutzer nur die Tastatur verwendet, funktioniert das perfekt. Sie können eingeben, verwenden Sie die Aufwärts- und Abwärtspfeile, um einen Wert auszuwählen, und dann die Tabulatortaste, um zu beenden. Das Auswahlereignis wird ausgelöst, die ID wird festgelegt und anschließend wird das Änderungsereignis ausgelöst und die Seite wird zurückgesendet.

Wenn der Benutzer mit der Eingabe beginnt und dann die Maus zur Auswahl der Autocomplete-Optionen verwendet, wird das Änderungsereignis ausgelöst (der Fokus wechselt zum Autocomplete-Menü?) Und die Seite wird zurückgeschrieben, bevor das Auswahlereignis festgelegt werden kann die ID.

Gibt es eine Möglichkeit, das Änderungsereignis erst nach dem ausgewählten Ereignis auszulösen, selbst wenn eine Maus verwendet wird?

$(function() { 
    var txtAutoComp_cache = {}; 
    var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() }; 
    $('#txtAutoComp').change(function() { 
     if (this.value == '') { txtAutoComp_current = null; } 
     if (txtAutoComp_current) { 
      this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current; 
      $('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current); 
     } else { 
      this.value = ''; 
      $('#hiddenAutoComp_ID').val(''); 
     } 
     // Postback goes here 
    }); 
    $('#txtAutoComp').autocomplete({ 
     source: function(request, response) { 
      var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') + '", "count": 0 }'; 
      if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) { 
       response(txtAutoComp_cache.content); 
       return; 
      } 
      $.ajax({ 
       url: 'ajaxLookup.asmx/CatLookup', 
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json', 
       data: jsonReq, 
       type: 'POST', 
       success: function(data) { 
        txtAutoComp_cache.req = jsonReq; 
        txtAutoComp_cache.content = data.d; 
        response(data.d); 
        if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; } 
       } 
      }); 
     }, 
     select: function(event, ui) { 
      if (ui.item) { txtAutoComp_current = ui.item; } 
      $('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : ''); 
     } 
    }); 
}); 

Answer 1

Ich weiß nicht, über das Änderungsereignis verhindert Brennen, aber man kann leicht einige conditionals in Ihrem Änderungsereignis werfen, die das verborgene Feld stellt sicher eingestellt wurde und dass die TextBox hat derzeit einen Wert .

Answer 2

Sie können dies lösen, indem Sie Ihr Change Event als Autocomplete-Option implementieren, genau wie select, anstatt jQuerys Funktion change() zu verwenden.

Sie können die Liste der Ereignisse unter the autocomplete demo & documentation page sehen. Es besagt, dass das Änderungsereignis immer nach dem Schließen-Ereignis ausgelöst wird, das nach dem Auswahlereignis ausgelöst wird. Sehen Sie sich die Quelle für 'combobox' an, um ein Beispiel für einen Event Hook zu sehen.

Answer 3

Er arbeitete für mich auf der Maus auswählen, wenn ich dies tue:

focus: function (event, ui) { 
         $j(".tb").val(ui.item.value); 
         return true; 
        } 

Dies bewirkt, dass der TextBox Text auf der Maus Fokus-Ereignisse zu ändern, ebenso wie die Art und Weise es auf Tastaturereignis geschieht. Und wenn wir ein Element auswählen, wird die Auswahl geändert.