yii2 kartik-v/yii2-widget-typeahead output customization

Question

This widget inputs text and gives search result via drop down list. Question is how can I customize it? Is there any kind of form or some property where I could write some html template to get answers as stylish hyperlinks with images and etc. ?

This code is not working unfortunately.

This is view inside layout

 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();

and controller

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

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

I've tried different this also not working

        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);
}

As u can see I've tried different options in controller, cause search was not responding to key inputs. But controller is ok, because if I manually go to its url it responds well.

score 1 · Answer 1 · answered Jul 02 '17 at 05:33

1

I never used this widget before. But reading through the doc, it seems you can customize the way suggestions are rendered by modifying suggestion under template under dataset.

suggestion – Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of displayKey wrapped in a p tag i.e. <p>{{value}}</p>. The widget includes the Handlebars template compiler loaded by default.

I guess the {{url}} and {{name}} in the $template comes from the data gioven to the widget.You may need to verify that.

$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}')")
              ]
          ]
      ]
]);

answered Jul 02 '17 at 05:33

ck_arjun

1,367
1
11
19

Did as u wrote but getting no action while trying to search for anything. I've even put var_dump(); die; Inside seearch controller to understand if widget calls it, but widget does not calling it. If I call controller manually it responds. I've used this 'prefetch' => Url::to(['site/search']), and this 'prefetch' => Url::to([Yii::$app->request->baseUrl.'/site/search']), does not work at all :( – David Jul 02 '17 at 13:45
Why is this widget part of a label ? Please provide the whole view code. Also did you check your console to see if an ajax call to `site/search` is being made ? – ck_arjun Jul 03 '17 at 07:01
the widget sits inside layouts navx widget, so it's part of the menu. Updated my initial post so u can see it. This works fine if I use static data for search widget. I mean it works fine from that part of menu. But problems stasrt when I use prefetch -> to controller. I did checked console while running nothing happens inside console. But If I write wrong address in prefetch, console fires error 500. probably that means that widget is being checked upon page load. but When I input keypress nothing happens. – David Jul 03 '17 at 08:05
yes ,with `prefetch` option the widget fetch the data on load. The widget expect to have data in a specific format, `[['value' => 'data1'], ['value' => 'data2'],...]` , but your controller returns the query result. Try formatting the returned data. Also , you can still pass the data directly from controller rather than going for ajax call. – ck_arjun Jul 03 '17 at 08:21
updated my question, check new version of controller. But it also not working. This method was working when I was calling it inside view and sending to widget as data. – David Jul 03 '17 at 08:36
1

Im not sure why thats happening. Cant verify it at the moment.I shall give the extension a try later today and in the mean time if you figure it out please leave a comment – ck_arjun Jul 03 '17 at 11:51
Thanks! I will try also. – David Jul 03 '17 at 11:58

yii2 kartik-v/yii2-widget-typeahead output customization

1 Answers1