Question

您好我遇到了类型和动态表单一起工作的问题。只有第一项有效但当我添加另一项时，typeahead无法正常工作。这就是我如何使用typeahead

<?= $form->field($item, "[{$index}]code")->widget(Typeahead::classname(), [
          'options' => ['placeholder' => 'Choose from existing or enter new code'],
          'pluginOptions' => ['highlight' => true, 'minLength' => 3],
          'scrollable' => true,
          'dataset' => [
                            [
                                'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                                'display' => 'value',
                                'prefetch' => Url::to(['app/app-codes']),
                                'remote' => [
                                      'url' => Url::to(['app/code']) . '?q=%QUERY',
                                      'wildcard' => '%QUERY'
                                 ],
                                 'limit' => 100,
                            ]
                       ]
          ]); ?>

我的jquery

<?php

$js = '

jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) {

    jQuery(".dynamicform_wrapper .panel-title-address").each(function(index) {

        jQuery(this).html("Items: " + (index + 1))

        jQuery("#item" +(index + 1) + "-code").parent().typeahead({highlight:true, minLength:3});
    });

});


jQuery(".dynamicform_wrapper").on("afterDelete", function(e) {

    jQuery(".dynamicform_wrapper .panel-title-address").each(function(index) {

        jQuery(this).html("Items: " + (index + 1))

        jQuery("#item" +(index + 1) + "-code").parent().typeahead({highlight:true, minLength:3});

    });

});

';


$this->registerJs($js);

Answer 1

解决方案使用干净的typeahead.js ，而不使用kartik-v

1）定义资产 https://github.com/corejavascript/typeahead.js

CSS：https://github.com/bassjobsen/typeahead.js-bootstrap-css

说明如何定义您是否不知道：https://toster.ru/q/142561#answer_item_1377456

\app\assets\TypeaheadAsset::register($this);

2）

<?= $form->field($modelTz, "[{$ind}]tz_number")->textInput(['class'=>'form-control tz_number', 'autocomplete'=>'off']) ?>

3）在DynamicFormWidget::end();之后添加

<script>
    function typeaheadInit(){
        $('.tz_number').typeahead('destroy').typeahead({
                hint: true,
                highlight: true,
                minLength: 2
            },
            {
                name: 'typeAhead1',
                source: new Bloodhound({datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
                    remote: {
                        url: '<?=Url::to(['/site/ajax-find-tz']) . '?q=%QUERY'?>',
                        wildcard: '%QUERY'
                    }
                }),
                display: "value",
                templates:{"suggestion": function (d) { return '<p>' + d.value + ' - ' + d.customer + '</p>'; }}
            }
        );
    }
    $(function () {
        typeaheadInit();

        $(".dynamicform_wrapper").on("afterInsert", function() {
            typeaheadInit();
        });
    });
</script>

Yii2 kartik typeahead不使用wbraganca动态表单

1 个答案: