数据列表使第二行可搜索

如何解决数据列表使第二行可搜索

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

<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>

我可以使用任何Javascript或jQuery函数来更改数据列表的行为。第一行显示选定的城市，第二行可搜索。任何建议将不胜感激。

解决方法

这里是没有插件的方法。

function openSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function closeSearchDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

function selectFilteredValue() {
    document.getElementById("search_input").value = event.target.getAttribute("data-value");
    closeSearchDropdown();
}

function filterSearchDropdown() {
    var input,filter,ul,li,span,i;
    input = document.getElementById("search_value");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    span = div.getElementsByTagName("span");
    for (i = 0; i < span.length; i++) {
        txtValue = span[i].textContent || span[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            span[i].style.display = "";
        } else {
            span[i].style.display = "none";
        }
    }
}

.dropbtn {
    background-color: #4caf50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover,.dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown .search-area {
    box-sizing: border-box;
    background-image: url("searchicon.png");
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid #ddd;
}

.dropdown .search-area:focus {
    outline: 3px solid #ddd;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    border: 1px solid #ddd;
    z-index: 1;
}

.dropdown-content span {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown span:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
    </head>
    <body>
        <h2>City</h2>

        <div class="dropdown">
            <input onclick="openSearchDropdown()" id="search_input" />
            <div id="myDropdown" class="dropdown-content">
                <input type="text" placeholder="Search.." id="search_value" onkeyup="filterSearchDropdown()" class="search-area" />
                <span data-value="Bangkok" onclick="selectFilteredValue()">Bangkok</span>
                <span data-value="Hong_Kong" onclick="selectFilteredValue()">Hong_Kong</span>
                <span data-value="Jakarta" onclick="selectFilteredValue()">Jakarta</span>
            </div>
        </div>
    </body>
</html>

数据列表使第二行可搜索

如何解决数据列表使第二行可搜索

解决方法

相关推荐