TypeaheadBasic Widget TypeaheadBasic.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The TypeaheadBasic widget is a Yii 2 wrapper for for the Twitter Typeahead.js plugin with certain custom enhancements. This input widget is a jQuery based replacement for text inputs providing search and typeahead functionality. It is inspired by twitter.com's autocomplete search functionality and based on Twitter's typeahead.js, which is described as a fast and fully-featured autocomplete library. The widget is specially styled for Bootstrap 3. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses TypeaheadBasic widget for input like any other field.

Note

The TypeaheadBasic widget is a basic implementation of the typeahead.js plugin without any suggestion engine. It uses a javascript substring matcher and Regular Expression matching to query and display suggestions.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the Typeahead Basic widget configuration are:
  • data: array a single dimensional data array which will be used for the typeahead dropdown and filter. This is mandatory.

  • 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.

  • 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 – 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 – If false, the typeahead will not show a hint. Defaults to true.

    • minLength – The minimum character length needed before suggestions start getting rendered. Defaults to 1.

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

    pluginEvents = [
        "typeahead:initialized " => "function() { log("typeahead:initialized "); }",
        "typeahead:opened" => "function() { log("typeahead:opened"); }",
        "typeahead:closed" => "function() { log("typeahead:closed"); }",
        "typeahead:selected" => "function() { log("typeahead:selected"); }",
        "typeahead:autocompleted" => "function() { log("typeahead:autocompleted"); }",
    ];
    

Usage with ActiveForm and model (with search term highlighting)

With a model and without ActiveForm (with search term highlighting)

Usage without a model (with search term highlighting)

A disabled typeahead input

Scrollable dropdown input

Right to Left (RTL) input support with a scrollable dropdown

use kartik\widgets\Typeahead

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

// 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',
    'data' =>  $data,
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
]);

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

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

// Scrollable dropdown input
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'name' => 'state_15',
    'data' =>  $data,
    'scrollable' => true,
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
]);

// Right to Left (RTL) input support with a scrollable dropdown
echo '<label class="control-label">State</label>';
echo Typeahead::widget([
    'name' => 'state_15',
    'data' =>  $data,
    'rtl' => true,
    'options' => ['placeholder' => 'Filter as you type ...'],
    'pluginOptions' => ['highlight'=>true],
]);