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

【问题标题】：How Can I Make My JS Search Bar Be NOT Case Sensitive?如何让我的 JS 搜索栏不区分大小写？
【发布时间】：2021-10-31 23:33:52
【问题描述】：

所以我创建了一个网站，您可以上传、下载、删除和预览文件。我还有一个 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>

【问题讨论】：

标签： javascript c# asp.net asp.net-core-mvc case-sensitive

【解决方案1】：

检查时为什么不将两边都转换为小写。在这种情况下，td 块中元素的大小写是什么以及用户插入的文本是什么都无关紧要。我们在应用程序中经常使用它来进行比较。

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);
                })
            }

【讨论】：

非常感谢，完美运行，爱你

【解决方案2】：

可以通过将查询两侧的值转换为小写或大写（根据您的喜好）来否定区分大小写。

所以你的搜索逻辑需要改变

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

到这里：

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

【讨论】：

非常感谢