有没有办法在用户键入时使用第一个 Google Location 返回值自动填充/文本完成表单字段？
Posted
技术标签:
【中文标题】有没有办法在用户键入时使用第一个 Google Location 返回值自动填充/文本完成表单字段？【英文标题】：Is there a way to autofill/text complete a form field, as user types, with the first Google Location returned value? 【发布时间】：2018-08-29 15:18:52 【问题描述】：我在位置表单中有一个标准字段，使用 Google Places API。
<div><input class="input_standard fakeWaitlistCity" placeholder="Location" id="autocomplete"></input></div>
当用户键入时，它会在下面显示建议。是否有设置也可以使用第一个返回值填写该字段？
这是它目前的样子：
这里的目标是用户不能只输入“纽约”。如果他们停止输入，整个字段将已经填满“New York, NY, USA”。
这是用户键入时的理想体验：
谢谢！
更新 - 我找到了 this discussion 关于它的名称。
这是来自上面链接的图片，我正在谈论的内容：
【问题讨论】：
【参考方案1】：// Bind dollar signs to query selector (IE8+)
var $ = document.querySelector.bind(document);
function preventStandardForm(evt)
// prevent standard form from submitting
evt.preventDefault();
function autoCallback(predictions, status)
// *Callback from async google places call
if (status != google.maps.places.PlacesServiceStatus.OK)
// show that this address is an error
pacInput.className = 'error';
return;
// Show a successfull return
pacInput.className = 'success';
pacInput.value = predictions[0].description;
function queryAutocomplete(input)
// *Uses Google's autocomplete service to select an address
var service = new google.maps.places.AutocompleteService();
service.getPlacePredictions(
input: input,
componentRestrictions:
country: 'us'
, autoCallback);
function handleTabbingOnInput(evt)
// *Handles Tab event on delivery-location input
if (evt.target.id == "pac-input")
// Remove active class
evt.target.className = '';
// Check if a tab was pressed
if (evt.which == 9 || evt.keyCode == 9)
queryAutocomplete(evt.target.value);
// ***** Initializations ***** //
// initialize pac search field //
var pacInput = $('#pac-input');
pacInput.focus();
// Initialize Autocomplete
var options =
componentRestrictions:
country: 'us'
;
var autocomplete = new google.maps.places.Autocomplete(pacInput, options);
// ***** End Initializations ***** //
// ***** Event Listeners ***** //
google.maps.event.addListener(autocomplete, 'place_changed', function ()
var result = autocomplete.getPlace();
if (typeof result.address_components == 'undefined')
queryAutocomplete(result.name);
else
console.log(result.address_components);
);
// Tabbing Event Listener
if (document.addEventListener)
document.addEventListener('keydown', handleTabbingOnInput, false);
else if (document.attachEvent) // IE8 and below
document.attachEvent("onsubmit", handleTabbingOnInput);
// search form listener
var standardForm = $('#search-shop-form');
if (standardForm.addEventListener)
standardForm.addEventListener("submit", preventStandardForm, false);
else if (standardForm.attachEvent) // IE8 and below
standardForm.attachEvent("onsubmit", preventStandardForm);
// ***** End Event Listeners ***** //<link rel="stylesheet" href="$createLinkTo(dir:'asset/vendor/bootstrap/dist/css',file:'bootstrap.css')">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=AIzaSyBI9iSbSEo3h0LdqlqRFwnayYApQfmNXuE"></script>
<form id="search-shop-form" class="search-form" name="searchShopForm" action="/impl_custom/index/search/" method="post">
<label for="pac-input">Delivery Location</label>
<input id="pac-input" type="text" placeholder="Los Angeles, Manhattan, Houston" autocomplete="off" />
<button class="search-btn btn-success" type="submit">Search</button>
</form>更新：
注意：根据您的要求，谷歌地方有任何可用的选项。因此，您可以根据需要更改超时秒数。我假设300 ms 我会在下拉菜单中获得建议。
$("#find").click(function()
$("#geocomplete").trigger("geocode");
);
$(function()
$("#geocomplete").geocomplete()
);
$('.autoc').bind('keyup', function(e)
if(e.keyCode==13)
$('#find').click()
else
setTimeout(function()
var inputVal = $("#geocomplete").val();
var inpt = $("#geocomplete");
if( inputVal != "" )
var firstRowVal = firstRowValue();
if( firstRowVal != "" )
if(firstRowVal.toLowerCase().indexOf(inputVal.toLowerCase()) === 0)
inpt.val(firstRowVal);//change the input to the first match
inpt[0].selectionStart = inputVal.length; //highlight from end of input
inpt[0].selectionEnd = firstRowVal.length;//highlight to the end
, 300);// please change this 300 as per your internet connection speed.
);
function firstRowValue()
var selected = '';
// Check if any result is selected.
if ($(".pac-item-selected")[0])
selected = '-selected';
// Get the first suggestion's text.
var $span1 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(2)").text();
var $span2 = $(".pac-container:visible .pac-item" + selected + ":first span:nth-child(3)").text();
// Adds the additional information, if available.
var firstResult = $span1;
if ($span2)
firstResult += " - " + $span2;
return firstResult;
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBI9iSbSEo3h0LdqlqRFwnayYApQfmNXuE"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<form>
<input id="geocomplete" type="text" placeholder="Type in an address" size="50" class="autoc"/>
<input id="find" type="button" value="find" size="10"/>
</form>希望对你有帮助
参考here
【讨论】：
您好 - 感谢您的回复！当我运行您的代码 sn-p 时，它不会填写文本输入 - 它只有建议位置的下拉列表。 @gwalshington 我为这个问题做了很多工作。但没有得到任何解决方案。你可以用vue看看。 jsfiddle.net/santiblanko/dqo6vr57 请检查这个jsfiddle.net/RyTuV/346 并且对不起，我没有得到你想要的。谢谢。 @gwalshington 经过大量努力，我已经更新了答案。我不知道这是否完全满足您的要求。但官方在 google 或您期望的其他地方提供 API 或文档 嘿-感谢您的帮助。我认为这是可能的，所以我会继续研究解决方案，但我奖励了你，因为你最接近解决方案。非常感谢您的帮助！【参考方案2】：看看这个！这是一个 google place 自动填充 API，也许你可以使用它。 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
【讨论】：
嗨 - 非常感谢！这实际上是我在上面的问题中看到的下拉菜单。你知道如何让第一个返回的选项自动完成文本字段（如谷歌搜索），而不仅仅是下拉选项吗？谢谢你:)【参考方案3】：我为您的请求寻找了一个有效的解决方案，但无法通过 Google 找到任何有效的解决方案（除了 Google 本身！... =)）。
我尝试用 jQuery 和 jQuery-UI 做事……最后，我从头开始。
不管怎样，这是我读过并想与你分享的内容，我相信你会在这一切中找到一些有趣的东西。
关于 Google 以下是有关 google Instant 工作原理的一些答案：How does Google Instant work?https://searchengineland.com/how-google-instant-autocomplete-suggestions-work-62592
此外，Google 不仅使用自动完成功能，还使用预测算法：https://support.google.com/websearch/answer/106230?hl=enhttps://blog.google/products/search/google-search-autocomplete/
在视觉上，我们可以尝试做一些类似于 google 的事情，这个链接可能会有所帮助：How to implement a google suggest-like input field?
我会做什么
这是我结束的sn-p：
$(function()
var states = [
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',
'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa',
'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',
'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina',
'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington',
'West Virginia', 'Wisconsin', 'Wyoming'
];
$("#tags").autocomplete(
source: states,
autoSelectFirst: true,
autoFocus: true
);
);<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>由于我们不是 Google，我们无法预测用户想要写什么。 所以，在我的 sn-p 中，他们需要按 enter 或 tab 来确认自动完成。在用户仅输入两个或三个字符后自动选择第一个匹配项是不明智的。
但是，如果我们还是要自动选择……哪一个会被自动选择？ 例如，当我开始输入“New”时，如果我们按照 Google 的建议，自动选择肯定是“New York”，如果我们按照字母顺序自动选择“New Hampshire”，它可能是“New墨西哥”（如果基于用户位置）。
希望对您有所帮助。
【讨论】：
嗨 - 非常感谢所有链接！As we're not Google, we can't predict what the user wants to write. - 我们实际上可以预测他们想写什么！这是一个存储在 Google Places 中的位置——我用来验证位置的 API。此外，我不是在寻找一种方法来猜测用户想要输入的内容——Google Places API 已经做到了这一点，并附加了一个类似于上面 sn-p 的列表。我正在寻找他们键入时的自动填充功能。非常感谢您的贡献！以上是关于有没有办法在用户键入时使用第一个 Google Location 返回值自动填充/文本完成表单字段？的主要内容，如果未能解决你的问题，请参考以下文章
创建人时，有没有办法在 google people api 中添加第二个自定义字段？