# all files / src/widgets/ SearchWidget.js

21.88% Statements 7/32
0% Branches 0/12
0% Functions 0/6
21.88% Lines 7/32

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129

    1×

    1×

    1×

    1×

    1×

    1×

    1×

     /**
     * SearchWidgets combine a {@link OO.ui.TextInputWidget text input field}, where users can type a search query,
     * and a menu of search results, which is displayed beneath the query
     * field. Unlike {@link OO.ui.mixin.LookupElement lookup menus}, search result menus are always visible to the user.
     * Users can choose an item from the menu or type a query into the text field to search for a matching result item.
     * In general, search widgets are used inside a separate {@link OO.ui.Dialog dialog} window.
     *
     * Each time the query is changed, the search result menu is cleared and repopulated. Please see
     * the [OOjs UI demos][1] for an example.
     *
     * [1]: https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/#dialogs-mediawiki-vector-ltr
     *
     * @class
     * @extends OO.ui.Widget
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {string|jQuery} [placeholder] Placeholder text for query input
     * @cfg {string} [value] Initial query value
     */
    OO.ui.SearchWidget = function OoUiSearchWidget( config ) {
    	// Configuration initialization
    	config = config || {};

    	// Parent constructor
    	OO.ui.SearchWidget.parent.call( this, config );

    	// Properties
    	this.query = new OO.ui.TextInputWidget( {
    		icon: 'search',
    		placeholder: config.placeholder,
    		value: config.value
    	} );
    	this.results = new OO.ui.SelectWidget();
    	this.$query = $( '<div>' );
    	this.$results = $( '<div>' );

    	// Events
    	this.query.connect( this, {
    		change: 'onQueryChange',
    		enter: 'onQueryEnter'
    	} );
    	this.query.$input.on( 'keydown', this.onQueryKeydown.bind( this ) );

    	// Initialization
    	this.$query
    		.addClass( 'oo-ui-searchWidget-query' )
    		.append( this.query.$element );
    	this.$results
    		.addClass( 'oo-ui-searchWidget-results' )
    		.append( this.results.$element );
    	this.$element
    		.addClass( 'oo-ui-searchWidget' )
    		.append( this.$results, this.$query );
    };

    /* Setup */

    OO.inheritClass( OO.ui.SearchWidget, OO.ui.Widget );

    /* Methods */

    /**
     * Handle query key down events.
     *
     * @private
     * @param {jQuery.Event} e Key down event
     */
    OO.ui.SearchWidget.prototype.onQueryKeydown = function ( e ) {
    	var highlightedItem, nextItem,
    		dir = e.which === OO.ui.Keys.DOWN ? 1 : ( e.which === OO.ui.Keys.UP ? -1 : 0 );

    	if ( dir ) {
    		highlightedItem = this.results.getHighlightedItem();
    		if ( !highlightedItem ) {
    			highlightedItem = this.results.getSelectedItem();
    		}
    		nextItem = this.results.getRelativeSelectableItem( highlightedItem, dir );
    		this.results.highlightItem( nextItem );
    		nextItem.scrollElementIntoView();
    	}
    };

    /**
     * Handle select widget select events.
     *
     * Clears existing results. Subclasses should repopulate items according to new query.
     *
     * @private
     * @param {string} value New value
     */
    OO.ui.SearchWidget.prototype.onQueryChange = function () {
    	// Reset
    	this.results.clearItems();
    };

    /**
     * Handle select widget enter key events.
     *
     * Chooses highlighted item.
     *
     * @private
     * @param {string} value New value
     */
    OO.ui.SearchWidget.prototype.onQueryEnter = function () {
    	var highlightedItem = this.results.getHighlightedItem();
    	if ( highlightedItem ) {
    		this.results.chooseItem( highlightedItem );
    	}
    };

    /**
     * Get the query input.
     *
     * @return {OO.ui.TextInputWidget} Query input
     */
    OO.ui.SearchWidget.prototype.getQuery = function () {
    	return this.query;
    };

    /**
     * Get the search results menu.
     *
     * @return {OO.ui.SelectWidget} Menu of search results
     */
    OO.ui.SearchWidget.prototype.getResults = function () {
    	return this.results;
    };