Javascript 数据列表使第二行可搜索

我正在使用数据列表选择一个城市。我希望数据列表的第一行显示选定的城市，从第二行我需要搜索功能。当前，第一行是搜索行。我想要这样的东西

这是我的密码

---

是否有任何Javascript或jQuery函数可用于更改数据列表的行为。第一行显示所选城市，第二行为可搜索城市。任何建议都将不胜感激。

这里是一个没有插件的方法

函数OpenSearch下拉列表{ document.getElementByIdmyDropdown.classList.toggleshow； } 函数关闭搜索下拉列表{ document.getElementByIdmyDropdown.classList.toggleshow； } 函数selectFilteredValue{ document.getElementByIdsearch_input.value=event.target.getAttributedata-value； 关闭下拉列表； } 函数筛选器搜索下拉列表{ var输入、滤波器、ul、li、span、i； 输入=document.getElementByIdsearch\u值； filter=input.value.toUpperCase； div=document.getElementByIdmyDropdown； span=div.getelementsbytagnamesspan； 对于i=0；i-1{ span[i].style.display=； }否则{ span[i].style.display=none； } } } .dropbtn{ 背景色：4caf50； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； 光标：指针； } .dropbtn:悬停， .dropbtn:焦点{ 背景色：3e8e41； } .下拉列表.搜索区域{ 框大小：边框框； 背景图片：urlsearchicon.png； 背景位置：14px 12px； 背景重复：无重复； 字体大小：16px； 填充：14px 20px 12px 45px； 边界：无； 边框底部：1px实心ddd； } .下拉列表。搜索区域：焦点{ 外形：3倍固体ddd； } .下拉列表{ 位置：相对位置； 显示：内联块； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：f6f6f6； 最小宽度：230px； 溢出：自动； 边框：1px实心ddd； z指数：1； } .下拉式内容范围{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } .下拉范围：悬停{ 背景色：ddd； } .表演{ 显示：块； } 城市 曼谷 香港大学 雅加达

---

使用所选jQuery插件有一个变通方法。链接是没有插件可以完成的吗？

<label class="item">City:</label><input list="cities_list" id = "s_city" name = "s_city" placeholder="search..." type="text" onblur ="setCityName();" class="item">
        <datalist id="cities_list" class="item">
                <option value="Puerto Rico" date-time-zone="America/Puerto_Rico">
                <option value="Chicago" date-time-zone="America/Chicago">
                <option value="Antigua" date-time-zone="America/Antigua">
                <option value="Amsterdam" date-time-zone="Europe/Amsterdam">
                <option value="Istanbul" date-time-zone="Europe/Istanbul">
                <option value="London" date-time-zone="Europe/London">
                <option value="Rome" date-time-zone="Europe/Rome">
                <option value="Bangkok" date-time-zone="Asia/Bangkok">
                <option value="Hong_Kong" date-time-zone="Asia/Hong_Kong">
                <option value="Jakarta" date-time-zone="Asia/Jakarta">
        </datalist>