在自动完成输入上写入时显示/隐藏按钮

Posted 2023-05-09

【中文标题】在自动完成输入上写入时显示/隐藏按钮

【英文标题】：Display/Hide button when writing on autocomplete input

【发布时间】：2015-12-07 17:04:05

【问题描述】：

我有一个表格来管理带有姓名和地址的个人信息。 页面加载后，表单在输入文本中显示名称信息和地址信息。

1/ 如果我更改地址，自动完成 js 显示谷歌地图地址列表。目前我想隐藏提交按钮，直到点击地址。

2/如果没有点击或右键结果我想删除输入，显示“占位符”并显示按钮提交。

这是我的 jquery 脚本：

<script type='text/javascript'>
    $(document).ready(function()           
         $('#adress').keyup(function() 
            $('#validate_info').hide();
         );
    );
</script>

这里是html/php代码：

<input type="text" id="name" placeholder="George Lake"></input>
<input type="text" id="address" placeholder="17 Street Lane, Leeds, Royaume-Uni" ></input>
<button type="submit" id="validate_info">Validate</button>

页脚脚本页面：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
    var autocomplete = new google.maps.places.Autocomplete($("#address")[0], );

    google.maps.event.addListener(autocomplete, 'place_changed', function() 
        var place = autocomplete.getPlace();
        console.log(place.address_components);
    );
</script>

【参考方案1】：

此代码将为您提供帮助。

<script type='text/javascript'>
     $(document).ready(function()           
        $('#adress').keyup(function() 
           $('#validate_info').css("display", "none");
        );
     );
</script>

您的页脚脚本页面。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
       var autocomplete = new google.maps.places.Autocomplete($("#address")[0], );

       google.maps.event.addListener(autocomplete, 'place_changed', function() 
           var place = autocomplete.getPlace();
           // Check here that place is empty or not
           if(place == '')
               $('#address').value("");
               $('#validate_info').css("display", "block");
           
        );
</script>

【讨论】：

谢谢。但是如果输入被删除并且占位符显示第一个结果（来自页面加载），我想显示按钮提交

我已经编辑了我的答案。我已将按钮 css 按钮属性从“无”更改为“阻止”。所以现在它会显示提交按钮。

抱歉，如果我删除#address 中的所有内容，#validate_info 不会出现：-/

这可能由于不同的原因而发生。将警报置于 if 条件并检查它是否进入条件。因为对于显示按钮，我给了你一个正确的代码。