yii2 kartik-v / yii2-widget-typeahead输出定制

时间:2017-07-01 20:40:46

标签: search yii2 widget typeahead kartik-v

此小部件输入文本并通过下拉列表提供搜索结果。 问题是我该如何定制它?是否有任何形式或某些属性,我可以写一些HTML模板来获得答案作为时尚超链接与图像等?

不幸的是,此代码无效。

这是布局内部的视图

 echo NavX::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'encodeLabels' => false, //вот эта строка
            'items' =>
                [
            ['label' => Typeahead::widget([
                'name' => 'country_1',
                'options' => ['placeholder' => 'Filter as you type ...'],
                'scrollable' => true,
                'pluginOptions' => ['highlight'=>true],
                'dataset' => [
                    [
                        'prefetch' => Url::to(['site/search']),
                        'limit' => 10
                    ]
                ]
            ])],
['label' => 'About', 'url' => ['/site/about']],
 ]
        ]);
        NavBar::end();

和控制器

    public function actionSearch()
    {
// var_dump('TTTTTT'); die;
        $searchModel = ProductName::find()->asArray()->all();;
      //  echo $searchModel;

        return \yii\helpers\Json::encode($searchModel);
    //    echo 'test';
    }

我尝试了不同的这个也没有用

        public function actionSearch()
        {
        foreach (ProductName::find()->each() as $search_products) {
            $search_products_array[$search_products->nameID] = $search_products->name;
        }

        return \yii\helpers\Json::encode( $search_products_array);
}

你可以看到我在控制器中尝试了不同的选项,导致搜索没有响应键输入。但是控制器还可以,因为如果我手动转到它的网址,它反应良好。

1 个答案:

答案 0 :(得分:1)

我之前从未使用过此小部件。但是,通过doc阅读,您似乎可以通过修改suggestiontemplate下的dataset来自定义呈现方式。

  

建议 - 用于呈现单个建议。如果设置,则必须是预编译模板。关联的建议对象将用作上下文。默认为包含在p标记中的displayKey的值,即<p>{{value}}</p>。该小部件包括默认加载的Handlebars模板编译器。

我猜{{url}}中的{{name}}$template来自小部件的数据gio。您可能需要验证。

$template = '<div><img src="{{url}}"><p>{{name}}</p></div>';
 echo Typeahead::widget([
      // other options
      'dataset' => [
          [
              'prefetch' => Url::to(['controller/action']),
              'templates' => [
                 'notFound' => '<div class="text-danger" style="padding:0 8px">Unable to find repositories for selected query.</div>',
                 'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
              ]
          ]
      ]
]);