vojtys/typeahead

Typeahead (twitter/typeahead.js) for Nette - Forms

Typeahead

Typeahead (twitter/typeahead.js) for Nette framework, _(*1)

Install

$ composer require vojtys/typeahead

Versions

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., _(*2)

<!-- 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>