如何使用 Ajax 和 Laravel 将自动完成数据提取到他们受尊重的元素中？

这是我的问题。

我正在尝试从自动完成文本框中获取数据。

有两个文本框：

地区和省。

我已成功获取以区域为名称的文本框上的数据。我的问题是，它为下一个以省为名称的文本框赋予相同的值。

在我的 Laravel 刀片中，我有以下代码：

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

我还有一个名为 auto-complete 的 javascript 文件

$(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', '[email protected]');
Route::post('/register/showProvince', '[email protected]');

在我的控制器上是这个

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

我试图弄清楚为什么当我选择了区域时，它会为另一个文本框“省”提供相同的值。

有人可以帮我解决这个问题，或者至少向我解释为什么会发生这种情况？

谢谢