使用谷歌自动完成自动生成的文本框

Question

我正在使用 google auto completeplace 实现自动生成的文本框。但它只发生在第一个 tetbox 只有文本框的其余部分没有缓存自动完成位置。单击添加按钮时会自动生成文本框。 Image of autogenerated textbox

这是包含表格的主页的代码

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th width="20px">#</th>
                <th>Nearest Location</th>
            </tr>
        </thead>
        <tbody id="product">

            <?php require_once("input.php") ?>


        </tbody>
    </table>
    <table class="table">
        <tbody>
            <tr id="product">
                <td></td>

                <td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
                <td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
                <td align="right" width="120px"></td>
                <td width="160px" align="right"></td>
            </tr>
        </tbody>
    </table>
</div>

这里是input.php的代码

<tr class="product-item float-clear" style="clear:both;">
 <td><input type="checkbox" name="item_index[]" /></td>
 <td><input class="form-control" type="text" name="item_naddress[]" id="location" />
 <input type="text" class="form-control" id="clat[]" name="clat[]">
 <input type="text" class="form-control" id="clong[]" name="clong[]"></td</tr>

这是添加按钮的代码

function addMore() {
$("<tbody>").load("input.php", function() {
        $("#product").append($(this).html());
}); }

这是google auto completepalce的代码

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('location')),
    {types: []});

// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);}



function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById('clat[]').value = place.geometry.location.lat();
document.getElementById('clong[]').value = place.geometry.location.lng();}

我知道我弄错了，谁能告诉我如何解决它。提前致谢。请帮帮我

Answer 1

您的 html 代码

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th width="20px">#</th>
                <th>Nearest Location</th>
            </tr>
        </thead>
        <tbody id="product_table">
                 <?php require_once("input.php") ?>
        </tbody>
    </table>
    <table class="table">
        <tbody>
            <tr id="product">
                <td></td>

                <td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
                <td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
                <td align="right" width="120px"></td>
                <td width="160px" align="right"></td>
            </tr>
        </tbody>
    </table>
</div>

input.php的代码

<tr class="product-item float-clear" style="clear:both;">
 <td><input type="checkbox" name="item_index[]" /></td>
 <td><input class="form-control location" type="text" name="item_naddress[]" id="location" />
 <input type="text" class="form-control product-lat" id="clat[]" name="clat[]">
 <input type="text" class="form-control product-long" id="clong[]" name="clong[]"></td>
</tr>

添加按钮代码

function addMore() {
                $("<tbody>").load("input.php", function() {
                        $("#product_table").append($(this).html());
                        var locationid = Math.random().toString(36).substring(7);
                        $('#product_table tr:last').find('.location').attr('id',locationid);
                        initAutocomplete(locationid);
                }); 
     }

google auto completepalce的代码

function initAutocomplete(locationid) {
                autocomplete = new google.maps.places.Autocomplete((document.getElementById(locationid)));
                autocomplete.inputId = locationid;

                autocomplete.addListener('place_changed', function() {
                     var place = autocomplete.getPlace();
                    $('#'+this.inputId).closest('tr').find('input.product-lat').val(place.geometry.location.lat());
                    $('#'+this.inputId).closest('tr').find('input.product-long').val(place.geometry.location.lng());
                });
            }

     initAutocomplete('location');