使用 Ajax 自动完成在 select2 上选择的选项

Question

我正在尝试使用 Select2 和 Ajax 使用 Laravel 和 Blade 自动完成 select 一个值到 select 框中。我只在编辑模式下有问题（当我已经在数据库上有一个值时）并且它在插入模式下没有问题。这是我的 html 代码，其中 select 为空：

<select class="form-control" id="city-name" name="city" style="width: 100%">
    {{ isset($indirizzi->city_id) ? "<option value=\"". $indirizzi->city->id ."\" selected>".$indirizzi->city->name."</option>" : "" }}
</select>

这是我的 javascript 代码，我从数据库中获取值并创建一个新的选项值：

<script>
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    @if(isset($indirizzi))
        var newOption = new Option('{{ $indirizzi->city->name }}', '{{ $indirizzi->city->id }}', true, true);
        var txtOption = '<option value="{{ $indirizzi->city->id }}" selected>{{ $indirizzi->city->name }}</option>';
        $('#city-name').append(txtOption).val('{{ $indirizzi->city->id }}');
        $('#city-name').select2().trigger('change');
    @endif

    $().ready(function () {
        $("#city-name").select2({
            ajax: {
                url: "{{ route("ajaxFindCity") }}",
                dataType: 'json',
                delay: 250,
                type: "POST",
                data: function (params) {
                    return {
                        _token: CSRF_TOKEN,
                        city: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                error: function (data) {
                    showException(data);
                },
                cache: true
            },
            minimumInputLength: 3,
            templateSelection: function (data) {
                return data.city;
            }
        });
    });
</script>

但在加载页面时，我可以在 select 框中看到 selected 值，但无法搜索新值...

这是 route("ajaxFindCity") 的函数代码，如果我不在编辑视图中，它会起作用：

public function ajaxFind(Request $request)
{
    // Recupero la città da ricercare
    $city = $request->get("city");
    // Recupero le città che rientrano nella mia ricerca
    $cities = City::with('province')->where('cities.name', 'like', $city . '%')->get();
    $result = [];
    foreach ($cities as $city) {
        $result[] = [
            "id" => $city->id,
            "text" => $city->name . " (" . $city->province->code . ")",
            "city" => $city->name,
            "province" => $city->province->code
        ];
    }
    return response()->json($result);
}

Answer 1

如文档中所示的默认值 (https://select2.org/data-sources/ajax#default-pre-selected-values) 您需要删除额外代码：

@if(isset($indirizzi)
  ...
@endif

并将您的 select 替换为：

<select class="form-control" id="city-name" name="city" style="width: 100%">
@if($indirizzi)
   <option value="{{ $indirizzi->city_id }}" selected="selected"> {{ $indirizzi->city->name }}</option>
@endif
</select>

使用 Ajax 自动完成在 select2 上选择的选项

Selected option on select2 using Ajax Autocomplete

php

ajax

laravel

jquery-select2

laravel-blade