Question

我正在网站上工作，管理员的一项功能就是将客户端连接到代码。

我编写了一个代码，使用MVC从数据库中获取所有用户并将其设置为选项。现在我需要我搜索栏，以便我可以选择一个名字。

<div class="dropdown">
    <select name="userID" id="userID">
        @for (int i = 0; i < Model.Count; i++)
        {
            <option> @Model[i].Username @Model[i].Email</option>
        }
    </select>
    <button onclick="getUsersFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
        @for (int i = 0; i < Model.Count; i++)
        {
            <a ondrag="onClickFunction()"> @Model[i].Username @Model[i].Email</a>
        }
    </div>
</div>

和css代码

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

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

#myInput {
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
 }

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

.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

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

.dropdown a:hover {background-color: #ddd}

.show {display:block;}

和javascript代码

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

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
    } else {
        a[i].style.display = "none";
    }
}
}

搜索部分有效，但尚未合并，我不知道如何。

如何使用javascript在select语句中搜索

0 个答案: