Как я могу получить данные автозаполнения в их уважаемый элемент с помощью Ajax и Laravel?

Как я могу получить данные автозаполнения в их уважаемый элемент с помощью Ajax и Laravel?

26.06.2020 11:24:17 Источник

Вот в чем моя проблема.

Я пытаюсь извлечь данные из автоматически заполняющегося текстового поля.

Есть два текстовых поля:

Регион и провинция.

Я успешно извлек данные из текстового поля, имеющего регион в качестве имени. Моя проблема в том, что он дает то же самое значение следующему текстовому окну, имеющему провинцию в качестве имени.

В моем лезвии Ларавеля у меня есть этот код:

<input id="region"  type="text" class="form-control" name="region" value="" required autofocus>
<div id="regionList"> </div>

<input id="province"  type="text" class="form-control" name="province" value="" required autofocus>
<div id="provinceList"> </div>

У меня также есть файл javascript с именем auto-complete

$(document).ready(function() {

     $('#region').keyup(function() {
        var region = $(this).val();
        if (region != '')
        {
            var _token = $('input[name="_token"]').val();
            $.ajax({
                url: "register/showRegion",
                method: "POST",
                data: { region: region, _token: _token },
                success: function(data)
                {
                  $('#regionList').fadeIn();
                  $('#regionList').html(data);
                }
            });
        }
    });

    $(document).on('click', 'li', function() {
        $('#region').val($(this).text());
        $('#regionList').fadeOut();
    });

    $('#province').keyup(function() {
       var province = $(this).val();
       if (province != '')
       {
           var _prov_token = $('input[name="_token"]').val();
           $.ajax({
               url: "register/showProvince",
               method: "POST",
               data: { province: province, _token: _token },
               success: function(data)
               {
                 $('#provinceList').fadeIn();
                 $('#provinceList').html(data);
               }
           });
       }
   });


    $(document).on('click', 'li', function() {
        $('#province').val($(this).text());
        $('#provinceList').fadeOut();
    });
});

И на своих маршрутах я включал это

Route::post('/register/showRegion', 'LocationController@showRegion');
Route::post('/register/showProvince', 'LocationController@showProvince');

А на моем контроллере есть вот это

public function index() {

        return view('auth.register');
    }

    function showRegion(Request $request)
    {
        if ($request->get('region'))
        {
            $region = $request->get('region');
            $regions = Refregion::where('regDesc', 'LIKE', "$region%")->get();

            $output = '<ul class="dropdown-menu" style="display:block; position:absolute;">';
            foreach($regions as $region)
            {
                $output .= '<li><a href="#">'.$region->regDesc.'</a></li>';
            }
            $output .= '</ul>';
            echo $output;
        }
    }

    function showProvince(Request $request)
    {
        if ($request->get('province'))
        {
            $province = $request->get('province');
            $province = Refprovince::where('provDesc', 'LIKE', "province%")->get();

            $output = '<ul class="dropdown-menu" style="display:block; position:absolute;">';
            foreach($provinces as $province)
            {
                $output .= '<li><a href="#">'.$province->provDesc.'</a></li>';
            }
            $output .= '</ul>';
            echo $output;
        }
    }

Я пытаюсь понять, почему он дает такое же значение другому текстовому полю "провинция", когда я выбрал регион.

Может ли кто-нибудь помочь мне в этом или хотя бы объяснить, почему это происходит?

Спасибо

У вопроса есть решение - Посмотреть?

Ответы - Как я могу получить данные автозаполнения в их уважаемый элемент с помощью Ajax и Laravel? / How can I fetch autocomplete data into their respected element using Ajax and Laravel?

Является ответом!
Ramiz Kongulov

26.06.2020 11:32:00

изменить его

$(document).on('click', 'li', function() {
    $('#region').val($(this).text());
    $('#regionList').fadeOut();
});

на этом

$('#regionList').on('click', 'li', function() {
    $('#region').val($(this).text());
    $('#regionList').fadeOut();
});

и изменить его

$(document).on('click', 'li', function() {
    $('#province').val($(this).text());
    $('#provinceList').fadeOut();
});

на этом

$('#provinceList').on('click', 'li', function() {
    $('#province').val($(this).text());
    $('#provinceList').fadeOut();
});
Закрыть X