OOUI/Elements/Lookup/nl

// 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 );

Voorbeeld