邮政编码到城市自动完成

Question

我目前正在尝试执行以下操作：我有两个输入字段，如下所示：

 <div class="form-group{{ $errors->has('plz') ? ' has-error' : '' }}">
                                <label for="plz" class="col-md-4 control-label">PLZ</label>

                                <div class="col-md-6">
                                    <input id="plz" type="number" class="form-control" name="plz"
                                           value="{{$plz}}" autofocus required>
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                                <label for="city" class="col-md-4 control-label">Stadt</label>

                                <div class="col-md-6">
                                    <input required id="city" type="text" class="form-control" name="city"
                                           value="{{$city}}">
                                </div>
                            </div>

所以一个用于邮政编码，一个用于城市。我想要的是，当有人输入邮政编码时，城市会自动填写（仅德国城市需要）。因此，例如有人输入 70176 作为邮政编码，然后应该自动填写“斯图加特”。可能我们需要 AJAX 吗？但是我不知道该怎么做以及从哪里获取数据。

有人可以帮我吗？

PS：如果这可能有帮助，我正在使用 Laravel 作为 PHP 框架

Answer 1

是的，您需要 AJAX。我可能只能为您指出正确的方向。

[后端]

1. 你需要在你的 laravel 应用程序中创建一个城市控制器和动作来处理这个请求，它返回一个 JSON 响应。 例如。： http://localhost/api/city/{邮政编码} 您的操作处理程序必须获取此“邮政编码”参数，然后将其与您的数据库匹配。 （见步骤 4）。找到匹配项后，返回响应。 https://laravel.com/docs/5.4/controllers#single-action-controllers

2. 此 JSON 响应将包含城市： 例如：json_encode(['city' => '斯图加特']); https://laravel.com/docs/5.4/responses#json-responses

3. 您可能需要获取可用于在 PLZ 和城市之间进行匹配的公共数据。 https://www.aggdata.com/free/germany-postal-codes

4. 您必须使用 CSV 解析器库或创建一个，然后将邮政编码与此数据匹配。 https://github.com/parsecsv/parsecsv-for-php

[前端]

1. 使用 JS 库，我推荐使用 JQuery，因为它易于安装且学习曲线较小。 “jQuery.get”是你的朋友。 https://api.jquery.com/jquery.get/

2. 所以你必须在 PLZ 输入上“绑定”onChange 事件。 onChange，它必须执行“jQuery.Get”并调用您在 [backend] 部分设置的 URL。 http://api.jquery.com/bind/

3. 从服务器收到响应后，找到要编写响应的元素，并将其放在那里。例如：jQuery('.element').value(response.city);

我希望它可以为您指明正确的方向。

Answer 2

有一些方法可以做到这一点，但最好的方法是使用 Ajax。

在 JQuery 中你会使用这样的东西：（编辑 [URL] 和 $form 部分）

var $form = $("form:eq(0)");
$form.find("input[name=plz]").on('keyup', function(){
    $.get('[URL]?plz=' + $(this).val, function(result) {
        $form.find('input[name=city]').val(result);
    });
});

现在在代码的服务器端创建一个页面来搜索您的数据库（您可能需要一个包含姓名和邮政编码的数据库）并打印城市名称。