如何让我的 JS 搜索栏不区分大小写？

Question

所以我创建了一个网站，您可以在其中上传、下载、删除和预览文件。我还有一个 java-script 函数，可以让用户搜索文件。唯一的问题是，搜索区分大小写。谁能帮我提供一个示例代码，说明我应该如何更改我的脚本，以便它不再区分大小写？我是 ASP.NET 的新手，仍在努力思考。

这是索引页：

@model IEnumerable<Proiect2PracticaClona.Models.Files>

<center>
    <h1>Daca nici acu nu merge ... ma sinucid</h1>
    <h2>Sa moara mama</h2>
    <hr />
    @if (User.IsInRole("Admin"))

    {
        <form methord="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
            <input type="file" name="fifile" />
            @Html.RadioButton("category", "incepator")
            @Html.RadioButton("category", "intermediar")
            @Html.RadioButton("category", "admin")
            <input type="submit" value="Upload" />



            <hr />
        </form>}
    <div>
        File Name:<input id="search"  onkeyup="search()" placeholder="cauta"/>

    </div>

    <table class="table">
        @if (User.IsInRole("User"))
        {
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link">Incepatori <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">Avansati</a>
                        </li>
                        <li class="nav-item dropdown">

                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled">Admini</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        }
        <tr>
            <th>File Name</th>

        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.info</td>
                <td><a href="@Url.Action("Download","Home",new { filename=item.info })">Download</a></td>
                @if (User.IsInRole("Admin"))
                {
                    <td><a href="@Url.Action("Delete", "Home", new { filedel = item.info })">Delete</a></td>
                }
                <td><a href="/Home/DocumentViewer/@item.info">Viewer</a></td>

            </tr>
        }
    </table>
    @section scripts
{
        <script>
            function search() {
                $("tr").each(function (index, value) {
                    if (index > 0 && !$(this).find("td")[0].innerText.includes($("#search").val())) {
                        $(this).attr("hidden", true);
                    } else {
                        $(this).removeAttr("hidden");
                    }
                    console.log(value);
                })
            }
        </script>
    }
</center>

Answer 1

可以通过将查询两边的值转换为小写或大写（根据您的偏好。

来取消区分大小写

因此您的搜索逻辑需要更改

if (index > 0 && !$(this).find("td")[0].innerText.includes($("#search").val())) {

为此：

if (index > 0 && !$(this).find("td")[0].innerText.toLowerCase().includes($("search").val().toLowerCase())) {

Answer 2

为什么检查的时候不把两边都转成小写呢。这种情况与 td 块中元素的大小写以及用户插入的文本的大小写无关紧要。我们在out应用中经常使用这个来做比较。

function search() {
                $("tr").each(function (index, value) {
                    if (index > 0 && !$(this).find("td")[0].innerText.toLowerCase().includes($("#search").val().toLowerCase())) {
                        $(this).attr("hidden", true);
                    } else {
                        $(this).removeAttr("hidden");
                    }
                    console.log(value);
                })
            }

如何让我的 JS 搜索栏不区分大小写？

How Can I Make My JS Search Bar Be NOT Case Sensitive?

javascript

c#

asp.net

case-sensitive

asp.net-core-mvc