Android中Google Maps Places Autocomplete默认设当前位置咨询

当然可以实现这个需求！我来给你分享几种实用的实现思路，不管你用的是哪个UI库的Autocomplete组件，核心逻辑都是一致的：在组件被点击（或聚焦）时，把当前页面的地址赋值给组件的输入值。

1. React Material-UI Autocomplete 示例 #

这是最常用的场景之一，我们可以通过监听组件的点击/聚焦事件，将当前页面地址设置为输入框的值：

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function UrlAutocomplete() {
  const [inputValue, setInputValue] = useState('');

  // 点击组件时触发，设置当前地址为输入值
  const handleTriggerDefaultUrl = () => {
    const currentPageUrl = window.location.href;
    setInputValue(currentPageUrl);
  };

  return (
    <Autocomplete
      freeSolo
      inputValue={inputValue}
      onInputChange={(event, newValue) => setInputValue(newValue)}
      // 用onFocus会比onClick更精准，避免点击组件边缘误触发
      onFocus={handleTriggerDefaultUrl}
      renderInput={(params) => (
        <TextField {...params} label="输入地址" variant="outlined" />
      )}
    />
  );
}

export default UrlAutocomplete;

2. 原生HTML + JavaScript 示例 #

如果是用原生的datalist实现自动补全，逻辑同样简单：

<input type="text" id="urlInput" list="urlOptions" onfocus="setCurrentPageUrl()">
<datalist id="urlOptions">
  <option value="https://example.com">
  <option value="https://test-site.com">
</datalist>

<script>
function setCurrentPageUrl() {
  const inputElement = document.getElementById('urlInput');
  // 只在输入框为空时设置默认值，避免覆盖用户已输入内容
  if (!inputElement.value) {
    inputElement.value = window.location.href;
  }
}
</script>

小提示 #

• 优先使用onFocus事件而非onClick，这样只会在用户真正点击输入框聚焦时触发，避免误触组件的其他区域。
• 如果需要保留用户已输入的内容，可以加个判断：只有当输入框为空时才设置当前地址为默认值。

内容的提问来源于stack exchange，提问作者ayabbear