Javascript 使用引导带下拉菜单的文本框

我正在使用bootstrap来开发这个项目。目前我有一个文本过滤器下拉的要求。如果用户知道列表项目，他/她可以直接输入文本并搜索列表，或者他/她可以滚动项目。选择后，项目应显示在文本框中

我一直在网上搜索，但没有找到解决办法

不过，下面的链接很有帮助，但并不完全有用

---

如果有人知道，请告诉我。

对于国家、城市和地址，您应该使用谷歌地图功能

这是怎么做的

函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-33.8688151.2195），
缩放：13
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'pac-input'）；
var types=document.getElementById（'type-selector'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
map.controls[google.maps.ControlPosition.TOP\u LEFT].push（类型）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-29）
});
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
回来
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；//为什么是17？因为它看起来不错。
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize：新的google.maps.Size（35,35）
}));
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
var地址=“”；
if（位置、地址和组件）{
地址=[
（place.address_components[0]&&place.address_components[0]。简称| | |“”），
（place.address_components[1]&&place.address_components[1]。简称| | |“”），
（place.address_components[2]&&place.address_components[2]。简称| |“”）
].加入（“”）；
}
infowindow.setContent（“”+place.name+”
“+地址）；
信息窗口。打开（地图、标记）；
});
//在单选按钮上设置侦听器以更改位置上的筛选器类型
//自动完成。
功能设置ClickListener（id、类型）{
var radioButton=document.getElementById（id）；
google.maps.event.addDomListener（单选按钮，'click'，函数（）{
自动完成。设置类型（类型）；
});
}
setupClickListener（'changetype-all'，[]）；
setupClickListener（'changetype-address'，['address']）；
setupClickListener（'changetype-Establish'，['Establish']）；
setupClickListener（'changetype-geocode'，['geocode']）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，主体，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
.控制{
边缘顶部：16px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：400px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}

全部的
机构
地址
地理编码

要做到这一点，我最近必须实现类似的功能。
它被称为“自动完成”。您是否使用“自动完成”来获取国家和城市？@alex:-不，我不需要自动完成文本框。它应该是带有文本过滤器的下拉列表。用于什么？对于国家/地区和城市？对于下拉列表中的项目列表（国家/地区）是的。您能详细说明“带文本过滤器的下拉列表”和“自动完成文本框”之间的区别吗？我需要下面的链接。请提供一个示例我需要下面的链接select2.github.io/examples.html。请你给我举个例子，我不知道这是怎么回答这个问题的。