Data live search dont work. How can I resolve?

Viewed 28

I have two options, when selected one state, I call my javascript where do the route and it the controller put the cities the determity city with reference it the id_state, my function work very good, my problem is when charge my list of the cities, my data-live-search dont work, how can resolve this? it have something in the JasvaScript or Select with error?

My Select Option

                <div class="col-sm-12 col-md-4  col-lg-4">
                    <label for="email_address">Estado</label>
                    <div class="form-group">
                        <select class="selectpicker form-control mycols p-0" id="id_state" name="id_state" data-live-search="true" title="Informe o Estado" data-hide-disabled="true" required>
                            @foreach($states as $state)
                            <option value="{{ $state->id }}">{{ $state->description }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 col-lg-4">
                    <label for="email_address">Cidade</label>
                    <div class="form-group">
                        <select class="selectpicker form-control mycols p-0" id="id_city" name="id_city" data-live-search="true" title="Informe a Cidade" data-hide-disabled="true" required>
                            @foreach($cities as $city)
                            <option value="{{ $city->id }}">{{ $city->description }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

My JavaScript

$('#id_state').on('change', function(e) {
    var id_selected_state = e.target.value;

    var url = '{{URL::to("/citiesByState")}}' + '/' + ":id_state";

    url = url.replace(':id_state', id_selected_state);

    
    $.ajax({
        type: "POST",
        url: url,
        data: {},
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(data) {

            $('select[id="id_city"]').empty();
            $('#id_city option:selected').remove();
            $("#id_city").val('').selectpicker('refresh');
            $('#id_city').selectpicker({
                liveSearch: true
            });
            $.each(data, function(key, value) {
                console.log(value.description);
                $("#id_city").append($('<option></option>').attr('data-tokens', value.id).val(value.id).html(value.description));

            });

            $("#id_city").selectpicker('refresh');
            $('#id_city').selectpicker({
                liveSearch: true
            });

        },
        error: function(data) {

        }
    });
});

The problem

With the States I can search

image

With cities I can't

image

0 Answers
Related