OOUI/Elements/Lookup/nl

̺OO.ui.mixin.LookupElement is een mixin die een menu met voorgestelde waarden voor een tekstinvoerwidget maakt. Voorgestelde waarden zijn gebaseerd op de tekens die de gebruiker in het tekstinvoerveld typt en over het algemeen wordt het menu alleen weergegeven wanneer de gebruiker typt (in tegenstelling tot het menu in een OO.ui.SearchWidget, dat altijd zichtbaar is). Als een voorgestelde waarde wordt gekozen in het opzoekmenu, wordt die waarde de waarde van het invoerveld.

Houd er rekening mee dat een nieuw menu met voorgestelde items wordt weergegeven wanneer een waarde wordt gekozen in het opzoekmenu. Als dit niet het gewenste gedrag is, schakelt u opzoekmenu's uit met de methode setLookupsDisabled(), stelt u de waarde in en schakelt u de zoekopdrachten opnieuw in.

Als u LookupElement wilt gebruiken, moet u de drie abstracte methoden implementeren:

1. getLookupDisabled() — ː retourneert een aanvraagobject dat wordt gebruikt om de voorgestelde waarden op te halen. Dit moet een belofteobject zijn, zoals wordt geretourneerd door mw.Api.get().
2. getLookupCacheDataFromResponse() — Pak het antwoord van het bovenstaande verzoek en voer de verwerking uit die nodig is voordat deze lokaal in de cache wordt opgeslagen.
3. getLookupMenuOptionsFromData(data) — Pak de verwerkte gegevens uit het bovenstaande (die mogelijk in de cache zijn opgeslagen) en verander deze in een array van OO.ui.MenuOptionWidget objecten.

Voorbeeld

Het volgende is een voorbeeld van een TextInputWidget die in LookupElement wordt gemengd om een opzoekmenu te genereren (live demo):

Het wordt gebruikt in een dialoogvenster en aangepast met de $overlay configureren zodat het verder kan reiken dan de randen van het dialoogvenster. Als de $overlay configuratie niet was opgegeven, wordt het opzoekmenu geknipt door het dialoogvenster. Zie Overlays voor meer informatie.

// Een voorbeeld van een tekstinvoerwidget die samenwerkt met een opzoekelement
function MyLookupTextInputWidget( config ) {
 OO.ui.TextInputWidget.call( this, { validate: 'integer', placeholder: 'Enter an integer' }  );
 OO.ui.mixin.LookupElement.call( this, config );
}

OO.inheritClass( MyLookupTextInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( MyLookupTextInputWidget, OO.ui.mixin.LookupElement );
/**
 * Haal een nieuwe aanvraag op van de huidige opzoekquerywaarde.
 *
 * @protected
 * @method
 * @return {jQuery.Promise} jQuery AJAX object of promise object met een methode .abort()
 */
MyLookupTextInputWidget.prototype.getLookupRequest = function () {
  var
    value = this.getValue(),
    deferred = $.Deferred(),
    delay = 500 + Math.floor( Math.random() * 500 );

  this.getValidity().done( function ( valid ) {
    if ( valid ) {
      // Oplossen met resultaten na een bewuste vertraging
      setTimeout( function () {
        deferred.resolve( [ value * 1, value * 2, value * 3, value * 4, value * 5 ] );
      }, delay );
    } else {
      // Geen resultaat als de invoer ongeldig is
      deferred.resolve( [] );
    }
  } );

  return deferred.promise( { abort: function () {} } );
};
/**
 * Verwerk vooraf gegevens die door het verzoek worden geretourneerd vanaf #getLookupRequest.
 *
 * De retourwaarde van deze functie wordt in de cache opgeslagen met eventuele verdere query's voor de opgegeven waarde
 * zal de cache gebruiken in plaats van API-requests te doen.
 *
 * @protected
 * @method
 * @param {Mixed} antwoord Response van de server
 * @return {Mixed} In cache gezette resultaten
 */
MyLookupTextInputWidget.prototype.getLookupCacheDataFromResponse = function ( response ) {
  return response || [];
};
/**
 * Haal een lijst op met menu-optiewidgets van de (mogelijk in de cache opgeslagen) gegevens die worden geretourneerd door
 * #getLookupCacheDataFromResponse.
 *
 * @protected
 * @method
 * @param {Mixed} gegevens resultaten in de cache, meestal een array
 * @return {OO.ui.MenuOptionWidget[]} Menu-items
 */
MyLookupTextInputWidget.prototype.getLookupMenuOptionsFromData = function ( data ) {
  var
    items = [],
    i, number;
  for ( i = 0; i < data.length; i++ ) {
    number = String( data[ i ] );
    items.push( new OO.ui.MenuOptionWidget( {
      data: number,
      label: number
    } ) );
  }

  return items;
};

function MyDialog( config ) {
   MyDialog.super.call( this, config );
}
OO.inheritClass( MyDialog, OO.ui.Dialog );
MyDialog.static.name = 'MyDialog';
MyDialog.static.title = 'Using the lookup element mixin';
MyDialog.prototype.initialize = function () {
  MyDialog.super.prototype.initialize.apply( this, arguments );
  var panel = new OO.ui.PanelLayout( { padded: true, expanded: false } ),
    lookup = new MyLookupTextInputWidget( { $overlay: this.$overlay } );
  panel.$element.append( lookup.$element, '<p>This dialog contains a text input widget that ' +
    'mixes in LookupElement to generate a lookup menu. By default, the menu uses relative positioning. ' +
    'In this example, the $overlay config is passed to the constructor to allow the menu to extend beyond' +
    ' the edge of the dialog.  If this config were not specified, the lookup menu would be clipped by' +
    ' the dialog window.</p>' );
  this.$body.append( panel.$element );
};

var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );
var dialog = new MyDialog();
windowManager.addWindows( [ dialog ] );
windowManager.openWindow( dialog );

Voor een volledige lijst met ondersteunde methoden raadpleegt u de documentatie op codeniveau voor LookupElement.