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

Question

这是我的问题。

我正试图从一个自动完成的文本框中获取数据。

有两个文本框：

地区和省。

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

在我的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>

我还有一个名为自动完成的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', '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;
        }
    }

当我选择区域时，我试图找出为什么它给另一个文本框“省”以相同的值。

有人能帮我吗，或者至少向我解释一下为什么会发生这种事？

谢谢

Answer 1

改变它

$(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();
});