How can I make typeahead show database information in yii2?

Question

I want to make search in my project. I use typeahead but it's not working. This is my code:

<?php
        echo '<label class="control-label">Select Repository</label>';
        $template = '<div><p class="repo-language">{{no_telepon}}</p>' .
            '<p class="repo-name">{{nama}}</p>' .
            '<p class="repo-description">{{email}}</p></div>';
        echo Typeahead::widget([
            'name' => 'twitter_oss', 
            'options' => ['placeholder' => 'Filter as you type ...'],
            'dataset' => [
                [
                    'prefetch' => Penerima::find()->all(),
                    'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('value')",
                    'display' => 'value',
                    'templates' => [
                        'notFound' => '<div class="text-danger" style="padding:0 8px">Unable to find repositories for selected query.</div>',
                        'suggestion' => new JsExpression("Handlebars.compile('{$template}')")
                    ]
                ]
            ]
        ]);
    ?>

Answer 1

This question was asked long time a go.

I also faced the same problem, but i could figure-out this.

for future reference i add this post.

in your controller

$result = SampleModel::find()
                ->select('Attribute_name')
                ->where('name LIKE "%' . $searchParameter .'%"')
                ->asArray()
                ->all();

            return Json::encode($result);

1. here you need to get the database value as "associative array", you can get that from using "asArray()".
2. then as you see return value as Json encode.

in your "View"

<?php 

                            echo Typeahead::widget([
                                'name' => 'sampleName',
                                'options' => ['placeholder' => 'Filtering data ...'],
                                'scrollable' => true,
                                'pluginOptions' => ['highlight'=>true],
                                'dataset' => [
                                    [
                                    'remote' => [
                                        'url' => Yii::$app->urlManager->createUrl(['sample/action']) . 
                                        '?searchParameter=%QUERY',
                                        'wildcard' => '%QUERY'
                                    ],
                                    'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('Atribute_name')",
                                    'display' => 'Atribute_name',
                                    'limit' => 10,
                                    ],
                                ],

                                'pluginEvents' => [

                                    'typeahead:select' => 'function(e, s) { 
                                        EnableUserDetailsTypeAhead(s);
                                    }',
                                ]
                            ]);
                        ?>

here few things to be consider.

1. calling to the controller action. you can do that.

Yii::$app->urlManager->createUrl(['sample/action']) . 
                                        '?searchParameter=%QUERY',
                                        'wildcard' => '%QUERY'
                                    ],

2. the below lines inside data set must be provide.

'datumTokenizer' => "Bloodhound.tokenizers.obj.whitespace('Atribute_name')",
'display' => 'Atribute_name',

you will get the expected data.

this sample code i have tested and this is working

Answer 2

From the docs :

prefetch : array , configuration for the prefetch options object. Refer documentation for the options you can set for this parameter. The return data must be Json encoded and converted to an associative array of the format [['value' => 'data1'], ['value' => 'data2'],...] , where value is the fixed key set in display

You are passing an array of objects instead of an array of key value pairs. You can use asArray to create a list of objects. You will need to change display to the name of the field containing the data:

'prefetch' => Penerima::find()->select('title')->asArray()->all(),