Extjs4 autocomplete of combobox issue

问题

I am working in extjs+php on auto complete of combobox property.i have view as-

Ext.define('Balaee.view.kp.Word.Word',  {
    extend:'Ext.form.Panel',
    id:'WordId',
    alias:'widget.Word',
    title:'Dictionary',

    items:[
    {

        xtype : 'combobox',
        fieldLabel : 'Enter the word',
        name : 'wordtext',
        displayField: 'word',
        valueField: 'word',
        allowBlank : false,
        emptyText : 'Enter the word',
        enableKeyEvents : true,
        autoSelect: true,
        id : 'wordtext',
        triggerAction:'all',
        typeAhead:true,
        typeAheadDelay:100,
        mode:'remote',
        minChars:1,
        forceSelection:true,
        hideTrigger:true,
        store:'kp.WordStore',
        listeners:  {
                specialkey: function (f,e) {    
                     if (e.getKey() == e.ENTER) {
                     this.up().down('button[action=SearchAction]').fireEvent('click');
                    }
                }
            }
        },
        {
            xtype:'button',
            formBind: true,
            fieldLabel:'Search',
            action:'SearchAction',
            text:'Search',
        }
    ]
});

Store which is bind to this above combobox is reading function URL from server which is having function as-

public function actionGetword()
        {
             $record1=Word::model()->findAll();
             foreach($record1 as $record)
             {
             $main[]=array("wordId"=>$record->wordId,"word"=>$record->word);
             }
             echo "{ \"data\":".CJSON::encode($main)."} ";}

So store bind to above combobox is having all words store in database.If i am trying to insert word "table"in above field. When i am writing "ta" its providing me suggestions in dropdown. But its displaying all words.But i want to have words starting with "ta" only in suggestion box. So how can i modify this? Can someone help me

回答1:

You've got two ways to do what you want. Either you load all the data at once, like you currently do, and filter on the client side, or you filter the data on the server side. Solution 1 will trigger only one HTTP request, the combo will be very reactive.

Server side filtering

If you want to filter on the server, you should catch the parameter 'query' of the HTTP request. This is configurable with the option queryParam of the combo box.

For example:

$query = isset($_REQUEST['query']) ? $_REQUEST['query'] : false;

$record1 = Word::model()->findAll();
$main = array();
foreach($record1 as $record) {
    // Only add data for records matching the query
    if ($query === false || substr($record->word, 0, strlen($query)) === $query) {
        $main[]=array("wordId"=>$record->wordId,"word"=>$record->word);
    }
}
echo "{ \"data\":".CJSON::encode($main)."} ";

With such a server, the client code should look like:

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['wordId', 'word']
    ,proxy: {
        // TODO...
    }
});

Ext.widget('combo', {
    renderTo: 'comboCt'
    ,queryMode: 'remote' // you have this one wrong, 'mode' was in Ext 3
    ,triggerAction: 'all'
    ,displayField: 'word'
    ,idField: 'wordId'
    ,minChars: 1
    ,store: store

    // not needed because 'query' is the default, but you could customize that here
    ,queryParam: 'query'
});

Client side filtering

For solution 1, that is loading once and filtering locally, you must set queryMode to 'local', and load the store independently. You can use the store.load() method, or the autoLoad option.

Example client code that should word with your server:

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['wordId', 'word']
    ,proxy: {
        // TODO...
    }

    // Load the store once
    ,autoLoad: true
});

Ext.widget('combo', {
    renderTo: 'comboCt'
    // local means the combo will work with data in the store buffer
    ,queryMode: 'local'
    ,triggerAction: 'all'
    ,displayField: 'word'
    ,idField: 'wordId'
    ,store: store
    ,minChars: 1
});

来源：https://stackoverflow.com/questions/16035403/extjs4-autocomplete-of-combobox-issue