Componette

Componette

vojtys

vojtys / typeahead v0.4.3

Typeahead (twitter/typeahead.js) for Nette framework 3.0

download-cloud-line composer require vojtys/typeahead

Typeahead

Typeahead (twitter/typeahead.js) for Nette framework

Install

$ composer require vojtys/typeahead

Versions

State Version Branch Nette PHP
stable v0.4.1 master 3.0+ >=7.1
stable v0.3.3 master 2.4 >=5.6

Configuration

extensions:
	typehead: Vojtys\Forms\Typeahead\TypeaheadExtension

typeahead:
	limit: 10
	minLength: 2
	highlight: true

Usage

Presenter/Control

public function createComponentTypeaheadForm(): Form
{
    $form = new Form();

    /** @var TypeaheadInput $typeahead */

    // name, label, display (input displayed value), suggestion callback
    $typeahead = $form->addTypeahead('typeahead', 'Typeahead', 'title', function($display, $q) {

        return $this->searchBy($q); // returns array result [title => 'foo', description => 'foo foo']
    });

    $typeahead->setPlaceholder('Začni psát...'); // initial placeholder

    // add handlebars templates (http://handlebarsjs.com/)

    // suggestion template
    $typeahead->setSuggestionTemplate(function(Html $template) {
        $inner = Html::el('div')->setText('{{title}} – {{description}}');

        return $template->addHtml($inner);
    });

    // empty template
    $typeahead->setNotFoundTemplate(function(Html $template) {
        $inner = Html::el('div')->setText('nic tu neni');

        return $template->addHtml($inner);
    });

    $form->addSubmit('ok', 'Odeslat');

    return $form;
}

css

<link rel="stylesheet" type="text/css" href="https://www.example.com/vendor/vojtys/assets/css/typeahead.css">

js

Before </body> element.

<!-- nette.ajax.js -->
<script src='https://www.example.com/vendor/vojtys/assets/js/nette.ajax.js'></script>
<!-- handlebars.js -->
<script src='https://www.example.com/vendor/vojtys/assets/js/handlebars.min-v4.7.3.js'></script>
<!-- typehead.js -->
<script src='https://www.example.com/vendor/vojtys/assets/js/typeahead.js'></script>
<script src='https://www.example.com/vendor/vojtys/assets/js/vojtys.typeahead.js'></script>
price-tag-2-line

Badges

guide-fill

Dependencies

php (>= 5.4)
nette/di (>=2.3.0)
nette/forms (>=2.3.0)
nette/utils (>=2.3.0)
Componette Componette felix@nette.org