组合框问题Extjs4自动完成

问题描述

我在ExtJS的工作组合框property.i的自动完成+ PHP有视图 -

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

这是绑定到这个上面组合框店是从一个有功能的服务器读取功能URL -

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

所以商店绑定到上述组合框具有database.If我试图在上述领域中插入单词表的所有单词店。当我写TA它为我提供的下拉菜单建议。但它显示了所有words.But我想有只在意见箱开始TA字样。那么，如何可以修改吗？有人可以帮助我

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将触发只有一个HTTP请求时，该组合将是非常被动的。

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.

如果你想在服务器上过滤器，你应该抓住HTTP请求的参数'查询'。这与选项 queryParam 组合框的。

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.

例如：

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

通过这样的服务器，客户端code应该是这样的：

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

客户端过滤

有关解决方案1，即一旦装载和筛选本地，您必须设置 queryMode 来本地，并独立装载存储。您可以使用 store.load（）方法，或 AUTOLOAD 选项。

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.

例客户端code应该用这个词你的服务器：

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

这篇关于组合框问题Extjs4自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！