javascript - 邮政编码到城市自动完成

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. 您需要创建一个城市 Controller 和操作来在您的 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 和城市之间进行匹配的公共(public)数据。 https://www.aggdata.com/free/germany-postal-codes

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

[前端]

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

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

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

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