README

渲染一个 Twitter Typeahead.js Bootstrap 插件 小部件。

原版 仅修改了样式表，原版自带的样式表不能用了，另外把 typeaheadjs 本地化了。

安装

通过 composer 安装此扩展是首选方式。

运行

$ composer require xutl/yii2-type-ahead-widget:~1.0

或添加

"xutl/yii2-type-ahead-widget": "~1.0"

到您的 composer.json 文件的 require 部分。

使用方法

使用模型和 remote 配置

use dosamigos\typeahead\Bloodhound;
use dosamigos\typeahead\TypeAhead;
use yii\helpers\Url;

<?php
    $engine = new Bloodhound([
        'name' => 'countriesEngine',
        'clientOptions' => [
            'datumTokenizer' => new \yii\web\JsExpression("Bloodhound.tokenizers.obj.whitespace('name')"),
            'queryTokenizer' => new \yii\web\JsExpression("Bloodhound.tokenizers.whitespace"),
            'remote' => [
                'url' => Url::to(['country/autocomplete', 'query'=>'QRY']),
                'wildcard' => 'QRY'
            ]
        ]
    ]);
?>
<?= $form->field($model, 'country')->widget(
    TypeAhead::className(),
    [
        'options' => ['class' => 'form-control'],
        'engines' => [ $engine ],
        'clientOptions' => [
            'highlight' => true,
            'minLength' => 3
        ],
        'clientEvents' => [
            'typeahead:selected' => 'function () { console.log(\'event "selected" occured.\'); }'
        ],
        'dataSets' => [
            [
                'name' => 'countries',
                'displayKey' => 'value',
                'source' => $engine->getAdapterScript()
            ]
        ]
    ]
);?>

注意自定义 wildcard 的使用。如果使用 typeahead.js 默认的通配符（%QUERY），Yii2 将自动对其 URL 编码，这会使得替换令牌的配置不正确。

结果需要按照 插件文档 中指定的格式进行 JSON 编码。以下是一个示例自定义 Action 类，您可以将它插入任何 Controller

namespace frontend\controllers\actions;

use yii\base\Action;
use yii\helpers\Json;
use yii\base\InvalidConfigException;

class AutocompleteAction extends Action
{
	public $tableName;

	public $field;

	public $clientIdGetParamName = 'query';

	public $searchPrefix = '';

	public $searchSuffix = '%';

	public function init()
	{
		if($this->tableName === null) {
			throw new  InvalidConfigException(get_class($this) . '::$tableName must be defined.');
		}
		if($this->field === null) {
			throw new  InvalidConfigException(get_class($this) . '::$field must be defined.');
		}
		parent::init();
	}

	public function run()
	{
		$value = $this->searchPrefix . $_GET[$this->clientIdGetParamName] . $this->searchSuffix;
		$rows = \Yii::$app->db
			->createCommand("SELECT {$this->field} AS value FROM {$this->tableName} WHERE {$this->field} LIKE :field ORDER BY {$this->field}")
			->bindValues([':field' => $value])
			->queryAll();

		echo Json::encode($rows);
	}
}

以及如何在您的 Controller 类中配置它

public function actions()
{
	return [
		'autocomplete' => [
			'class' => 'frontend\controllers\actions\AutocompleteAction',
			'tableName' => Country::tableName(),
			'field' => 'name'
		]
	];
}

主题化

Twitter Typeahead.js Bootstrap 插件 不会对下拉列表、提示或输入字段进行样式设计。它这样做是为了让您能够自定义它，使其适用于您的应用程序。

我们包含了一个样式表，其中包含与 form-control Bootstrap 类和其他调整的提示，这样您可以轻松地识别类并对其进行样式设计。

测试

$ ./vendor/bin/phpunit

贡献

有关详细信息，请参阅 CONTRIBUTING。

鸣谢

• Antonio Ramirez
• Alexander Kochetov
• 所有贡献者

许可

BSD 许可证（BSD）。有关更多信息，请参阅 许可文件。

web 开发从未如此有趣
www.2amigos.us