README

安装

通过 Composer

$ composer require nepada/autocomplete-input

选项 A：通过 DI 扩展安装表单容器扩展方法

extensions:
    - Nepada\Bridges\AutocompleteInputDI\AutocompleteInputExtension

它将为 Nette\Forms\Container 注册扩展方法 addAutocomplete($name, $label, callable $dataSource): AutocompleteInput。

选项 B：在基础表单/容器类中使用特性

您还可以在基础表单/容器类中使用 AutocompleteInputMixin 特性来添加方法 addAutocomplete($name, $label, callable $dataSource): AutocompleteInput。

示例

trait FormControls
{

    use Nepada\Bridges\AutocompleteInputForms\AutocompleteInputMixin;

    public function addContainer($name)
    {
        $control = new Container;
        $control->setCurrentGroup($this->getCurrentGroup());
        if ($this->currentGroup !== null) {
            $this->currentGroup->add($control);
        }
        return $this[$name] = $control;
    }

}

class Container extends Nette\Forms\Container
{

    use FormControls;

}

class Form extends Nette\Forms\Form
{

    use FormControls;

}

用法

AutocompleteInput 是一个标准的 Nette 文本输入，增强了自动完成功能。输入暴露了用于检索匹配指定查询的条目的 URL - 创建输入时需要传递数据源回调

$autocompleteInput = $form->addAutocomplete('foo', 'Foo', function (string $query) {
    // return entries matching the query
});
$autocompleteInput->setAutocompleteMinLength(3); // set minimum input length to trigger autocomplete

客户端

后端表单控件与任何特定的客户端实现没有紧密耦合。渲染的输入包含所有必要设置的数据属性

<input type="text" name="foo"
    data-autocomplete-query-placeholder="__QUERY_PLACEHOLDER__"
    data-autocomplete-url="/some-url/?do=form-foo-autocomplete&form-foo-query=__QUERY_PLACEHOLDER__"
    data-autocomplete-min-length="3"
>
<!--
    data-autocomplete-min-length is optional
-->

如果您不想自己推出客户端解决方案，请尝试使用 @nepada/autocomplete-input npm 包。