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

Question

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

<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>

但在加载页面时，我可以在我的选择框中看到所选值，但无法搜索新值...

如果我不在编辑视图中，这是 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 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>