TypeaheadBasic supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the TypeaheadBasic::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set TypeaheadBasic::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set TypeaheadBasic::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set TypeaheadBasic::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-typeahead extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-typeahead "dev-master"

"kartik-v/yii2-widget-typeahead": "dev-master"

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the Typeahead widget configuration are:

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• useHandleBars: boolean, whether to register and use the HandleBars template compiler plugin. Defaults to true. You can set it to false if you do not wish to use HandleBars template compiler.

• defaultSuggestions: array, the list of default values/suggestions that will be displayed on init or when text queried is empty. This feature will be disabled if an empty array or invalid array is passed. Defaults to empty array [].

• scrollable: boolean whether the dropdown menu is to be made scrollable. Defaults to false.

• rtl: boolean whether the enable RTL (right to left) input support. Defaults to false.

• dataset: array the main Typeahead object for defining a set of data that hydrates suggestions. Unlike TypeaheadBasic, this is a multi-dimensional array for Typeahead, with each array item being an array that consists of the following settings:

  Part 1: Data Set Settings

  • source: JsExpression, The backing data source for suggestions. Expected to be a function with the signature (query, syncResults, asyncResults). This can also be a Bloodhound instance. If not set, this will be automatically generated based on the bloodhound specific properties mentioned in the next section below.

  • display: string, for a given suggestion object, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to value.

  • limit: integer, the max number of suggestions from the dataset to display for a given query. Defaults to 5.

  • async: bool, lets the dataset know if async suggestions should be expected. Defaults to true.

  • templates: array, the templates used for rendering suggestions. Each of the templates below can be a string or a pre-compiled template (i.e. a yii\web\JsExpression function that takes a datum as input and returns html as output). If not provided, defaults to <p>{{value}}</p>

    • notFound or empty, rendered when 0 suggestions are available for the given query. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query.

    • pending – Rendered when 0 synchronous suggestions are available but asynchronous suggestions are expected. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query.

    • footer– Rendered at the bottom of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

    • header – Rendered at the top of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

    • suggestion – Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of displayKey wrapped in a p tag i.e. <p>{{value}}</p>. The widget includes the Handlebars template compiler loaded by default. Check the advanced usage section on using this.

  Part 2: Bloodhound Settings

  • local: array, configuration for the local list of datums. You must set one of local, prefetch, or remote.

  • prefetch: array, configuration for the prefetch options object. Refer documentation for the options you can set for this parameter. The return data must be Json encoded and converted to an associative array of the format [['value' => 'data1'], ['value' => 'data2'],...], where value is the fixed key set in display.

  • remote: array, configuration for the remote options object. Refer documentation for the options you can set for this parameter. The return data must be Json encoded and converted to an associative array of the format [['value' => 'data1'], ['value' => 'data2'],...], where value is the fixed key set in displayKey.

  • initialize: boolean, whether to auto initialize the Bloodhound instance. Defaults to true.

  • identify: JsExpression, callback for identify.

  • datumTokenizer: JsExpression, defaults to null.

  • queryTokenizer: JsExpression, defaults to null.

  • sufficient: integer, defaults to 5.

  • sorter: JsExpression, defaults to null.

• disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

• readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

• options: array the HTML attributes for the widget input tag.

• container: array the HTML attributes for the container enclosing the input. You can set your own CSS classes here for stylin the dropdown when using templates.

• pluginOptions: array the options for the typeahead.js plugin. The following options can be configured:

  • highlight: boolean, if true, when suggestions are rendered, pattern matches for the current query in text nodes will be wrapped in a strong element. Defaults to false.

  • hint: boolean, if false, the typeahead will not show a hint. Defaults to true.

  • minLength: integer, the minimum character length needed before suggestions start getting rendered. Defaults to 1.

  • minLength: array, for overriding the default class names used. See Class Names for more details.

• pluginEvents: array the Typeahead JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin events documentation for details. For example:

  pluginEvents = [
      "typeahead:active" => "function() { log("typeahead:active"); }",
      "typeahead:idle" => "function() { log("typeahead:idle"); }",
      "typeahead:open" => "function() { log("typeahead:open"); }",
      "typeahead:close" => "function() { log("typeahead:close"); }",
      "typeahead:change" => "function() { log("typeahead:change"); }",
      "typeahead:render" => "function() { log("typeahead:render"); }",
      "typeahead:select" => "function() { log("typeahead:select"); }",
      "typeahead:autocomplete" => "function() { log("typeahead:autocomplete"); }",
      "typeahead:cursorchange" => "function() { log("typeahead:cursorchange"); }",
      "typeahead:asyncrequest" => "function() { log("typeahead:asyncrequest"); }",
      "typeahead:asynccancel" => "function() { log("typeahead:asynccancel"); }",
      "typeahead:asyncreceive" => "function() { log("typeahead:asyncreceive"); }",
  ];
  

use kartik\widgets\Typeahead

$data = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 
    'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

// Usage with ActiveForm and model (with search term highlighting)
echo \$form->field(\$model, 'state_3')->widget(Typeahead::classname(), [
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

// With a model and without ActiveForm (with search term highlighting)
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'model' => \$model, 
    'attribute' => 'state_4',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

// Usage without a model (with search term highlighting)
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'name' => 'state_10',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

// A disabled typeahead input
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'name' => 'state_11',
    'disabled' => true,
    'options' => [
        'placeholder' => 'Filter as you type ...',
    ],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

use kartik\widgets\Typeahead;
use yii\helpers\Url;

// Enabling default suggestions on init or when no text is searched
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'name' => 'state_12',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'defaultSuggestions' => $data, // you can set it to your own array
    'pluginOptions' => ['highlight' => true],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 20
        ]
    ]
]);

// Prefetch data via controller action along with a scrollable dropdown
echo '<label class="control-label">Select Country</label>';
echo Typeahead::widget([
    'name' => 'country_1',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'scrollable' => true,
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'prefetch' => Url::to(['site/country-list']),
            'limit' => 10
        ]
    ]
]);

// Right to Left (RTL) input support
echo '<label class="control-label">Select Country</label>';
echo Typeahead::widget([
    'name' => 'country_30',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'scrollable' => true,
    'rtl' => true,
    'pluginOptions' => ['hint' => false, 'highlight' => true],
    'dataset' => [
        [
            'prefetch' => Url::to(['site/country-list']),
            'limit' => 10
        ]
    ]
]);

// Defines a custom template with a <code>Handlebars</code> compiler for rendering suggestions
echo '<label class="control-label">Select Repository</label>';
$template = '<div><p class="repo-language">{{language}}</p>' .
    '<p class="repo-name">{{name}}</p>' .
    '<p class="repo-description">{{description}}</p></div>';
echo Typeahead::widget([
    'name' => 'twitter_oss', 
    'options' => ['placeholder' => 'Filter as you type ...'],
    'dataset' => [
        [
            'prefetch' => $baseUrl . '/samples/repos.json',
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
            'display' => 'value',
            'templates' => [
                'notFound' => '<div class="text-danger" style="padding:0 8px">Unable to find repositories for selected query.</div>',
                'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
            ]
        ]
    ]
]);

// Two datasets that are prefetched, stored, and searched on the client
echo Typeahead::widget([
    'name' => 'sports',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'prefetch' => $baseUrl . '/samples/nba.json',
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
            'display' => 'value',
            'templates' => [
                'header' => '<h3 class="league-name">NBA Teams</h3>'
            ]
        ],
        [
            'prefetch' => $baseUrl . '/samples/nhl.json',
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
            'display' => 'value',
            'templates' => [
                'header' => '<h3 class="league-name">NHL Teams</h3>'
            ]
        ]
    ]
]);

/**
 * Prefetches some data then relies on remote requests (ajax) via Controller action
 * for suggestions when prefetched data is insufficient. 
 * The json encoded prefetch source is: 
 * [{value:"Andorra"}, {value:"United Arab Emirates"}, {value:"Afghanistan"}, 
 *  {value:"Antigua and Barbuda"}, {value:"Anguilla"}, {value:"Albania"}]
 */
echo Typeahead::widget([
    'name' => 'country',
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
    'dataset' => [
        [
            'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
            'display' => 'value',
            'prefetch' => $baseUrl . '/samples/countries.json',
            'remote' => [
                'url' => Url::to(['site/country-list']) . '?q=%QUERY',
                'wildcard' => '%QUERY'
            ]
        ]
    ]
]);

/** 
 * Your controller action to fetch the list
 */
public function actionCountryList($q = null) {
    $query = new Query;
    
    $query->select('name')
        ->from('country')
        ->where('name LIKE "%' . $q .'%"')
        ->orderBy('name');
    $command = $query->createCommand();
    $data = $command->queryAll();
    $out = [];
    foreach ($data as $d) {
        $out[] = ['value' => $d['name']];
    }
    echo Json::encode($out);
}