如何通过内置的Ajax框架为带有October CMS的Select2提供数据源

巧克力

October CMS提供了一个广泛的AJAX框架,我希望使用该框架来填充Select2框。

根据Select2,使用远程数据集的过程如下:

$(".js-data-example-ajax").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;
      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

但是从October CMS文档中,我无法弄清楚如何手动将数据传递到服务器。

问题是:要使用哪个URL,我需要传递哪些参数,以便October知道我要访问哪个函数。另外,如何在不部分加载的情况下捕获结果?

这可能是一个小问题。我可能看错了方向。也许根本不应该使用AJAX框架。对正确的进行方式有何见解?

**通过SAMUEL编辑正确的答案**

要使Select2与October CMS结合使用远程数据集,请考虑以下陷阱。下面是我的工作代码:

// SELECT 2
$('select').select2({
    /*placeholder: "Your placeholder", // Remove this, this causes issues*/
    ajax: {
        // Use transport function instead of URL as suggested by Samuel
        transport: function(params, success, failure) {
            var $request = $.request('onSelect', {
                data: params.data
            });
            $request.done(success);
            $request.fail(failure);
            return $request
        },
        dataType: 'json',
        delay: 250,
        data: function (params) {
            console.log(params);
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data,params) {
            console.log(data);
            return {
                // The JSON needs to be parsed before Select2 knows what to do with it.
                results: JSON.parse(data.result)
            };
        },
        cache: true
    },
    minimumInputLength: 1
});

下面是我结合此Select2示例使用的示例输出:

[  
   {  
      "id":1,
      "text":"Henry Kissinger"
   },
   {  
      "id":2,
      "text":"Ricardo Montalban"
   }
]

上面的JSON是由我的VisitorForm.php文件生成的:

<?php namespace XXX\VisitorRegistration\Components;

use Cms\Classes\ComponentBase;
use XXX\VisitorRegistration\Models\Visitor;
use October\Rain\Auth\Models\User;

class VisitorForm extends ComponentBase {
    public function componentDetails()
    {
        return [
            'name' => 'Visitor Form',
            'description' => 'Description of the component'
        ];
    }

    // The function that returns the JSON, needs to be made dynamic
    public function onSelect() {
        return json_encode(array(array('id'=>1,'text'=>'Henry Kissinger'), array('id'=>2,'text'=>'Ricardo Montalban')));
    }
}

Voilà,希望这会有所帮助。

塞缪尔·乔治

传递transport选项而不是url这是一个例子:

$(".js-data-example-ajax").select2({
    ajax: {
        transport: function(params, success, failure) {

            /*
             * This is where the AJAX framework is used
             */
            var $request = $.request('onGetSomething', {
                data: params.data
            })

            $request.done(success)
            $request.fail(failure)

            return $request
        },

        dataType: 'json'
    },
    // ...
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在每个新请求中使用Ajax数据源进行select2下拉?

使用AJAX数据源时,可以在Select2中设置查询字符串参数吗?

春季如何使用Tomcat提供的JNDI数据源?

Select2.js v4.0:如何使用本地数组数据源设置默认选择的值?

在带有AJAX数据源的DataTables中使用列名

使用功能中的数据源(动态数据源)-Select2 v4

如何获取数据源?

带有 libref 的 Libname:如何访问数据源(库)

如何在 terraform 的数据源或资源块中使用提供者默认标签的值?

如何强制Angular 7+ Material Autocomplete输入仅由数据源提供的字母?

如何清空select2以前的数据?

angularjs中动态生成数据源时如何设置select选项为selected

通过值配置数据源

jQuery DataTables Ajax数据源的问题

如何在 WSO2 Micro Integrator 上的数据服务中配置数据源?

如何从源数据源创建不存在的odi目标映射数据源?

没有数据源的Jasperreport

是否有新的Instagram数据源?

如何获得本机的数据源长度?

Terraform中如何使用数据源?

如何从DataGrip导出/导入数据源?

如何找到 Graphql 查询数据源?

如何在代码C#ASP.NET中为报表查看器提供数据源实例

带有Spring Boot JPA的多个数据源

带有多个数据源的休眠配置类

带有 FirebaseListObservable 的 md-table 数据源

带有嵌套数据源的Angular Material表

带有对象数据源的ng-options

带有基于会话的数据源的Spring Boot