仅在用户停止输入后才使用Google API

时间:2018-02-27 11:05:55

标签: javascript



var locInputTimeout = null;
var input = document.getElementById('inputTxt');

input.onkeyup = function(e){
  clearTimeout(locInputTimeout);
  locInputTimeout = setTimeout(function(){initAutocomplete()},2000);
};
		

function initAutocomplete() {
	var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.setComponentRestrictions({'country': ['my']});
  alert("I am here!");
}

'https://maps.googleapis.com/maps/api/js?key=<MY API KEY HERE>&libraries=places',
&#13;
<input type="text" id="inputTxt" />
&#13;
&#13;
&#13;

以上代码正在使用api密钥填充。

我希望每次用户停止输入2秒,它会调用google api进行位置建议。但是,它发生在下面。任何帮助都非常感谢! ;)

期待:

  1. 我打字&#34; KLIA&#34; - 文本框:&#34; KLIA&#34;
  2. 我停止输入2秒
  3. 弹出&#34;我在这里&#34;和位置建议正在显示
  4. 我输入&#34; 2&#34; - 文本框:&#34; KLIA2&#34;
  5. 我停止输入2秒
  6. 弹出&#34;我在这里&#34;和位置建议正在显示
  7. 情境:

    1. 我打字&#34; KLIA&#34; - 文本框:&#34; KLIA&#34;
    2. 我停止输入2秒
    3. 弹出&#34;我在这里&#34;但位置建议未显示
    4. 我输入&#34; 2&#34; - 文本框:&#34; KLIA2&#34;
    5. 立即显示位置建议
    6. 弹出&#34;我在这里&#34; 2秒后

1 个答案:

答案 0 :(得分:0)

在我看来,您想要实现的是将谷歌搜索输入中的位置预测延迟两秒。 如answer所述,目前无法做到这一点。

关于你的方法,你的脚本实际上做了什么,就是在事件发生两秒后向你的输入提供'autoCompleter',正如你在fiddle中看到的那样,自动完成将会只有在输入值发生变化时才会被触发,但它不知道它何时被附加到已经有值的元素,这就是为什么在步骤3中虽然显示了警告,但表单未自动完成

我尝试使用以下脚本手动触发另一个fiddle中的keyup事件:

locInputTimeout = setTimeout(function(){initAutocomplete()},2000);

function initAutocomplete() {
    var autocomplete = new google.maps.places.Autocomplete(input);
    var currentValue=input.value
    autocomplete.setComponentRestrictions({'country': ['my']});
    input.value='';
    input.value=currentValue;
    input.focus();
}
然而,由于某种原因,我无法让它发挥作用。希望你能从那里继续。 我的建议是,你依靠gmaps内部机制来确定何时重新运行自动完成,因为他们可能会使用更好的启发式方法来执行此操作,并且根据此answer,设置自动完成的初始值为no普通任务。