Google 自动完成功能在 Foundation Accord 内部不起作用

发布于 2025-01-16 05:20:30 字数 1594 浏览 2 评论 0原文

我似乎无法让 Google 自动完成功能在 Foundation 手风琴（在 WordPress 中）内工作。该代码在手风琴之外运行良好。（应该注意的是，有三个输入具有相同的自动完成功能 - 其他两个也工作正常。）

起初，我认为这可能是一个事件委托问题，因为手风琴一开始就脱离了画布（移动仅供查看）。但更改代码来解决这个问题似乎没有帮助。
然后我用谷歌搜索了一下，发现我可能需要在哪里调整 z-index，但这似乎也没有帮助。

这是我的 JavaScript 文件中的内容：

    jQuery('body').on('input change', '.autocomplete', function () {
        var autocomplete = new google.maps.places.Autocomplete(this);
        autocomplete.inputId = this.id;
        autocomplete.addListener('place_changed', function () {
            const place = autocomplete.getPlace();
        });
        //jQuery('.pac-container').css({'z-index': '9999', 'display': 'block'});
    });

这是 HTML 的相关部分：

    <a href="#" class="accordion-title">City</a>
    <div class="accordion-content" data-tab-content>
        <div class="grid-x grid-margin-x">
            <div class="cell small-12">
                <div class="grid-x grid-padding-x">
                    <label for="filter-address-mobile" class="text-right middle">Choose a Location:</label>
                    <input type="text" id="filter-address-mobile" class="filter-address autocomplete" name="filter-address" value="<?php echo $search_filters->address ?>" placeholder="Enter Address">
                </div>
            </div>
        </div>
        <footer class="text-right">
            <button class="button small">Apply</button>
        </footer>
    </div>
</li>

原文

I can't seem to get Google autocomplete to work inside a Foundation accordion (in WordPress). The code works fine outside the accordion. (It should be noted that there are three inputs where the same autocomplete is in place - the other two are also working fine.)

At first, I thought maybe it was an event delegation issue since the accordion is off canvas to begin with (mobile view only). But changing the code to account for that doesn't seem to have helped.
Then I Googled around and saw where maybe I needed to adjust the z-index, but that doesn't seem to have helped either.

Here's what I've got inside my JavaScript file:

    jQuery('body').on('input change', '.autocomplete', function () {
        var autocomplete = new google.maps.places.Autocomplete(this);
        autocomplete.inputId = this.id;
        autocomplete.addListener('place_changed', function () {
            const place = autocomplete.getPlace();
        });
        //jQuery('.pac-container').css({'z-index': '9999', 'display': 'block'});
    });

And here's what the relevant portion of my HTML looks like:

    <a href="#" class="accordion-title">City</a>
    <div class="accordion-content" data-tab-content>
        <div class="grid-x grid-margin-x">
            <div class="cell small-12">
                <div class="grid-x grid-padding-x">
                    <label for="filter-address-mobile" class="text-right middle">Choose a Location:</label>
                    <input type="text" id="filter-address-mobile" class="filter-address autocomplete" name="filter-address" value="<?php echo $search_filters->address ?>" placeholder="Enter Address">
                </div>
            </div>
        </div>
        <footer class="text-right">
            <button class="button small">Apply</button>
        </footer>
    </div>
</li>

分享到QQ

分享到微博