将 Select2 与 Laravel 4 应用程序集成

Question

我决定在我的多选搜索过滤器中实现 select2，我可以通过一些帮助来集成它。

我有以下方法：

public function getContactByName($name)
{
    return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as name')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
}

此方法返回“first_name”和“last_name”与 URL 中输入的术语相似的任何记录，例如 http://www.example.com/admin/get-contact-name/{name}。

以下路由处理请求：

Route::get('admin/get-contact-name/{name}', 'AdminContactListController@getContactByName');

这一切都很好。我只需要一些帮助来使用 select2 和 AJAX 设置它。我不太确定在 JS 的选项中添加什么。

我有以下表单域设置：

<input name="contact_names_value" type="text" class="input-medium contact_names_value" id="contact_names_value">

谁能指出我正确的方向。干杯。

编辑：我有点在这里玩耍并在黑暗中拍摄，因为我不确定这些元素中的每一个是什么意思，例如页面等，但这是我拥有的代码到目前为止，我只想说它不起作用：

var name = $('#contact_names_value').val();
$('#contact_names_value').select2({
    placeholder: 'Search contacts',
    minimumInputLength: 3,
    ajax: {
        url: '/admin/get-contact-name' + name,
        dataType: 'json',
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10
            };
        },
        results: function (data, page) {
            return {results: data};
        }
    },
});

编辑：好的，伙计们，我想我更接近了，我想我现在可以通过 select2 获得结果，但是我遇到了 JavaScript 错误。这是我目前所拥有的。

方法：

public function getContactByName()
{
    $name = Input::get('name');
    return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as name')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
}

路线：

Route::get('admin/get-contact', 'AdminContactListController@getContactByName');

选择2 JavaScript：

$('#contact_names_value').select2({
    name: $('.select2-input').val(),
    placeholder: 'Search contacts',
    minimumInputLength: 3,
    ajax: {
        url: '/admin/get-contact' + name,
        dataType: 'json',
        data: function (term) {
            return {
                name: term
            };
        },
        results: function (data) {
            return {results: data};
        },
        dropdownCssClass: 'bigdrop'
    },
});

Select2 JS 错误：

Uncaught TypeError: Cannot call method 'toUpperCase' of undefined plugins.js:1549
C plugins.js:1549
a.fn.select2.defaults.formatResult plugins.js:1550
g plugins.js:1549
a.extend.populateResults plugins.js:1549
f.query.callback plugins.js:1549
(anonymous function) plugins.js:1549
a.extend.success plugins.js:1549
c jquery-1.9.1.min.js:3
p.fireWith jquery-1.9.1.min.js:3
k jquery-1.9.1.min.js:5
r

有什么建议吗？

Answer 1

好的，我现在可以像魅力一样工作了。

这是我的 JS 代码：

$('#contact_names_value').select2({
    placeholder: 'Search contacts',
    minimumInputLength: 3,
    ajax: {
        url: '/admin/get-contact',
        dataType: 'json',
        data: function (term, page) {
            return {
                contact_names_value: term
            };
        },
        results: function (data, page) {
            return {results: data};
        }
    },
    tags: true
});

我不需要“名称”变量引用，因为插件会处理这个并将选择/输入的值附加到查询字符串中。

其次，在我的表单中，我需要将类型设置为“隐藏”，因为之前是文本。

您还会在上面注意到我在结果和数据函数中都添加了“页面”。不确定这是否有所作为。

我还添加了 'tags: true' 使其像多选一样工作。

这是我的方法代码：

public function getContactByName()
{
    $name = Input::get('contact_names_value');
    return Contact::select(array('id', DB::raw('concat(first_name," ",last_name) as text')))->where(DB::raw('concat(first_name," ",last_name)'), 'like', "%$name%")->get();
}

请注意，在我的 select 语句中，我执行 DB::raw 并将“first_name”和“last_name”字段设置为“text”。我认为这是主要问题之一，因为插件需要“id”和“text”才能运行。

我的路线很简单：

Route::get('admin/get-contact', 'AdminContactsController@getContactByName');

Answer 2

你只需抓住输入框（例如，使用 jQuery 你可以这样做 $('#contact_names_value') 或 javascript 是 document.getElementById('contact_names_value')。）

一个应该有效的例子：

$('#contact_names_value').select2(your_value_from_getContactByName_method_here);

希望对您有所帮助。