xutl / yii2-type-ahead-widget
The bootstrap typeahead widget for the Yii framework
Installs: 170
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
- yiisoft/yii2: ~2.0.0
- yiisoft/yii2-bootstrap: ~2.0.0
Requires (Dev)
- phpunit/phpunit: ~4.0
This package is auto-updated.
Last update: 2024-10-11 02:14:03 UTC
README
Renders a Twitter Typeahead.js Bootstrap plugin widget.
原版 仅修改了样式表,原版自带的样式表不能用了,另外把typeaheadjs本地化了。
Installation
The preferred way to install this extension is through composer.
Either run
$ composer require xutl/yii2-type-ahead-widget:~1.0
or add
"xutl/yii2-type-ahead-widget": "~1.0"
to the require
section of your composer.json
file.
Usage
Using a model and a remote
configuration:
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()
]
]
]
);?>
Note the use of the custom wildcard
. It is required as if we use typeahead.js
default's wildcard (%QUERY
), Yii2 will automatically URL encode it thus making the wrong configuration for token replacement.
The results need to be JSON encoded as specified on the plugin documentation. The following is an example of a custom Action
class that you could plug to any 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);
}
}
And how to configure it on your Controller
class:
public function actions()
{
return [
'autocomplete' => [
'class' => 'frontend\controllers\actions\AutocompleteAction',
'tableName' => Country::tableName(),
'field' => 'name'
]
];
}
Theming
Twitter Typeahead.js Bootstrap plugin does not style the dropdown nor the hint or the input-field. It does it this way in order for you to customize it so it suits your application.
We have included a stylesheet with hints to match form-control
bootstrap classes and other tweaks so you can easily identify the classes and style it.
Testing
$ ./vendor/bin/phpunit
Contributing
Please see CONTRIBUTING for details.
Credits
License
The BSD License (BSD). Please see License File for more information.
web development has never been so fun
www.2amigos.us