CODEWITHSUNDEEP
phpyii
FSShaikh
FSShaikh

Reputation: 125

Yii CJuiAutoComplete display result in table instead of dropdown

I have CJuiAutoComplete widget that works fine, fetches data from table and shows in dropdown, But I want to show that searched data into a table just bellow the CJuiAutoComplete. and populate/create rows for searched values.

How can I do this? I searched a lot for this but I don't get any solution.

view -

<?php
        $this->widget('zii.widgets.jui.CJuiAutoComplete', array(
            'id' => 'searchContact',
            'name' => 'search_contact',
            'source' => $this->createUrl('user/searchContact'),
            'options' => array(
                'showAnim' => 'fold',
            ),
            'htmlOptions' => array(
                'size' => '40',
                'class' => 'form-control',
                'placeholder' => 'Search E-mail contacts',
            ),
        ));
        ?>`

action-

public function actionSearchContact() {
    $searchResult = array();
    $user_id = Yii::app()->user->getId();
    $term = trim($_GET['term']);
    if ($term) {
        $term = '%' . $term . '%';
        $contacts = Contact::model()->findAll('email LIKE :email AND user_id = :user_id', array(
            ':email' => $term,
            'user_id' => $user_id,
        ));
        foreach ($contacts as $contact) {
            $searchResult[] = array(
                'label' => $contact->email, // label for dropdown list          
                'value' => $contact->email, // value for input field          
                'user_id' => $contact->user_id, // return value from autocomplete
            );
        }
        echo CJSON::encode($searchResult);
    }
    Yii::app()->end();
}

Upvotes: 0

Views: 314

Answers (2)

Jaimin MosLake
Jaimin MosLake

Reputation: 675

[][1]http://api.jqueryui.com/autocomplete/#event-change found out that CJuiAutoComplete encapsulates the JUI autocomplete plugin.

and you can use its events in the option field.. so you can use all the events declared in [Link][1]

[1]: http://www.yiiframework.com/doc/api/1.1/CJuiAutoComplete "Link" you just have to use it under 

 'options' => array(
            'showAnim' => 'fold',
        ),

array .. you can use 

 change: function( event, ui ) {}

to get the things done. or equvivallent one to do your thing...

Upvotes: 0

abhij89
abhij89

Reputation: 625

Real Solution:

So if you are really willing to do it using CJuiAutocomplete then you need to work around the extension, customize it according to your need as by default its just a drop down list nothing else.

Here is the link in which it is clearly explained and defined how to do it.

Custom AutoComplete

Alternative:

You can add an onkeypress event to a text field, fire a ajax request on it, prepare your result according to your need in the ajax url, and display it. This will be really easy and will save overhead of customizing the CJuiAutocomplete extension. And ofcourse both of the methods take similar time.

Upvotes: 3

Related Questions