Javascript 如何防止选择google autocomplete将我的值放入输入？

我正在使用Google Autocomplete，希望在选择必要的位置后，将

街道编号+路线

值放入输入字段。我正在使用这个代码

let options={types:['address']}；
让autocomplete=newgoogle.maps.places.autocomplete（元素，选项）；
autocomplete.addListener（'place\u changed'，function（）{
让place=autocomplete.getPlace（）；
let components=new autocompletedAddressComponent（place.address\u components.parse（）；
/*getStreet正在返回地址\u components.street\u number.short\u name
和地址\u components.route.long\u name*/
让streetName=components.getStreet（）.trim（）；
$（元素）.val（街道名称）；
});

以及该代码的工作原理：

用户可以在输入中键入内容

谷歌建议用户选择必要位置

输入反映了用户的操作并将数据放入。例如，美国马萨诸塞州阿宾顿布罗克顿大道777号

此后，

place\u变更

开火，美国马萨诸塞州阿宾顿布罗克顿大道777号替换为布罗克顿大道777号

我不喜欢第四点，用户可以看到数据是如何从长地址替换为短地址的

---

在从下拉列表中选择位置后，是否有任何方法显示街道号+路线？我试图通过提供不同的

类型来使用
自动完成
方法选项，但没有任何帮助。我还需要在
autocomplete.getPlace（）
对象中获取国家、州、城市、邮政编码等所有数据（我正在网站上预填充这些字段）。
我通过使用并完全重新设计autocomplete小部件找到了解决方案

如果有人试图实现此服务，请参阅以下源代码：

registerGoogleAutoComplete=函数（输入）{
let options={types:['address']}；
const autocomplete=new google.maps.places.AutocompleteService（）；
//为预测列表构建容器
const predictionList=this.predictionListMarkup（输入）；
$（输入）.parent（）.append（预测列表）；
/*侦听输入更改事件并将数据发送到Google服务
获取预测列表*/
addEventListener（'input'，function（）{
//如果有什么东西，显示列表
if（输入值）{
predictionList.style.display='block'；
/*下面是getPlacePredictions的一个主要调用，其中包含您的输入
值正在发送到Google服务
（getPlacePredictions方法的输入选项）*/
autocomplete.getPlacePredictions({
输入：input.value，
类型：options.types，
}，功能（预测，状态）{
self.displayPredictionSuggestions（预测、状态、预测列表、输入）；
});
}否则{
//不藏不藏
predictionList.style.display='none'；
}
});
}
/**
*@param autocompleteFormField
*@returns{HTMLUListElement}
*/
this.predictionListMarkup=函数（autocompleteFormField）{
const predictionsWrapperDiv=document.createElement（`ul`）；
predictionsWrapperDiv.classList.add（`pac container`，`pac logo`）；
predictionsWrapperDiv.style.display='none'；
predictionsWrapperDiv.style.width=autocompleteFormField.clientWidth+'px'；
返回predictionsWrapperDiv；
};
this.displayPredictionsSuggestions=函数（预测、状态、预测列表、autocompleteFormField）{
if（status！==google.maps.places.PlacesServiceStatus.OK）{
predictionList.style.display=`none`；
返回；
}
predictionList.innerHTML=''；
/*这是谷歌API中所有预测的列表
是Google默认的Place对象。所以你们可以解析'address_component'并预先填充你们想要的内容*/
for（让我们预测预测）{
self.predictionBuilder（预测、预测列表、自动完成formField）；
}
//在这里，您可以绑定所有必要的事件，如keyDownPress、keyUpPress，以进一步控制预测列表
}
//这是一个每个预测元素的UI构建函数
this.predictionBuilder=函数（预测、预测列表、自动完成formField）{
//我们正在为ul容器创建li项
const predictionListItem=document.createElement（`li`）；
predictionListItem.classList.add（`pac item`）；
让text=prediction.description；
/*prediction有一个匹配的_子字符串，使用它可以将匹配的字符串变为粗体（正如Google所做的那样）*/
if（prediction.matched_substring.length>0）{
设tmp=text；
预测。匹配的子字符串。forEach（函数（项）{
设substrText=tmp.substring（item.offset，item.length+item.offset）；
text=text.replace（substrText，“+substrText+”）；
})
}
让节点=document.createElement（'div'）；
node.innerHTML=文本；
predictionListItem.appendChild（节点）；
/*添加“onClick”事件侦听器以处理用户选择操作
您可以在自动完成服务的“place\u changed”事件中执行相同的操作*/
predictionListItem.addEventListener（`click`，函数（）{
self.autocompleteServiceListener（预测、预测列表、autocompleteFormField）；
});
predictionList.appendChild（predictionListItem）；
};

附言：稍后我将尝试为这个
编写一个小组件/小部件。我已经通过使用并完全重新设计Autocomplete小部件找到了解决方案

如果有人试图实现此服务，请参阅以下源代码：

registerGoogleAutoComplete=函数（输入）{
let options={types:['address']}；
const autocomplete=new google.maps。