如何在 Jquery 中实现搜索功能？答案

【问题标题】：How to implement Search function in Jquery?如何在 Jquery 中实现搜索功能？
【发布时间】：2017-07-21 13:10:46
【问题描述】：

我不知道如何让搜索在keyup时自动刷新结果，

我也需要让它不区分大小写，如果没有结果显示段落 class="not-found"。我不知道如何让搜索在 keyup 时自动刷新结果，

我也需要让它不区分大小写，如果没有结果显示段落 class="not-found"。

    var usersArray = [
    {
        name: "Jhon Doe",
        age: 21,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Jane Doe",
        age: 20,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Milo Westfall",
        age: 31,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Dayna Bennefield",
        age: 27,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Danny Eckhoff",
        age: 18,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Estella Fosdick",
        age: 51,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Farah Benson",
        age: 77,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Keith Gross",
        age: 21,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Malcolm X",
        age: 20,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Jhon Cena",
        age: 31,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Rich Ross",
        age: 27,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Charlie Sheen",
        age: 44,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Lena Donovan",
        age: 51,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Jay Kos",
        age: 77,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Vincent Robert",
        age: 21,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Adam Rodriguez",
        age: 20,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Jhon Travolta",
        age: 31,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Ben Mackferson",
        age: 27,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Stella Cox",
        age: 18,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Jenna Johnson",
        age: 51,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    },
    {
        name: "Bill Tim",
        age: 77,
        image: "https://placeimg.com/140/140/people?t=" + Math.random()
    }
    ]

body {
    margin: 0;
    padding: 0;
    font-family: 'Zilla Slab', serif;
}

.container {
    width: 810px;
    margin: 0 auto;
}

h2 {
    float: left;
}

#search {
    float: right;
    margin-top: 30px;
}

.clear {
    clear: both;
}

.not-found {
    text-align: center;
    display: none;
}

.users {
    display: flex;
    flex-wrap: wrap;
}

.user-card {
    flex: 0 0 auto;
    flex-basis: 140px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 5px;
}

.user-image img {
    width: 140px;
    height: 140px;
    border-radius: 5px;
}

.user-info {
    margin-top: 10px;
}

.user-info .name, .user-info .age {
    margin: 0;
}

#template {
    display: none;
}

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Users loaded from JSON</title>
    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    </head>
    <body>

    <div class="container">
        <h2>Users:</h2>
        <input type="text" id="search" placeholder="Search by name...">

        <div class="clear"></div>

        <div id="template" class="user-card">
            <div class="user-image">
              <img src="">
            </div>
            <div class="user-info">
              <h4 class="name"></h4>
              <h5 class="age"></h5>
            </div>
        </div>

        <p class="not-found">
            No users found, please change search criteria...
        </p>

        <section class="users">
            <!-- Users loaded here -->
        </section>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="users.js"></script>
    <script src="script.js"></script>
    </body>
    </html>

【问题讨论】：

这是第三个链接 - nbNZM.jpg
你能分享一些代码吗....???
请在问题中提供您的minimal reproducible example使用文字而非图片。
它在图像 1html 和 2users 上
首先您没有足够的代表来发布图像，其次，我们更喜欢代码而不是图像，因为我们无法从图像中复制粘贴文本。

标签： javascript jquery html search

【解决方案1】：

这是一个简单的例子。它应该包含你需要的一切

$(function() {
  $("#search").on("keyup", function() {
    $(".users").html("");
    var val = $.trim(this.value);
    if (val) {
      val = val.toLowerCase();
      $.each(usersArray, function(_,obj) {
       // console.log(val,obj.name.toLowerCase().indexOf(val),obj)
        if (obj.name.toLowerCase().indexOf(val) != -1) {
          $(".users").append('<div class="user-card"><span class="user-info">'+obj.name+'</span><br/><img class="user-image" src="'+obj.image+'"/></div>');
        }
      });
    }
    $(".not-found").toggle($(".users").find("img").length==0);
  });
});


var usersArray = [{
    name: "Jhon Doe",
    age: 21,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Jane Doe",
    age: 20,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Milo Westfall",
    age: 31,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Dayna Bennefield",
    age: 27,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Danny Eckhoff",
    age: 18,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Estella Fosdick",
    age: 51,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Farah Benson",
    age: 77,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Keith Gross",
    age: 21,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Malcolm X",
    age: 20,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Jhon Cena",
    age: 31,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Rich Ross",
    age: 27,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Charlie Sheen",
    age: 44,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Lena Donovan",
    age: 51,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Jay Kos",
    age: 77,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Vincent Robert",
    age: 21,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Adam Rodriguez",
    age: 20,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Jhon Travolta",
    age: 31,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Ben Mackferson",
    age: 27,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Stella Cox",
    age: 18,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Jenna Johnson",
    age: 51,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  },
  {
    name: "Bill Tim",
    age: 77,
    image: "https://placeimg.com/140/140/people?t=" + Math.random()
  }
];

body {
    margin: 0;
    padding: 0;
    font-family: 'Zilla Slab', serif;
}

.container {
    width: 810px;
    margin: 0 auto;
}

h2 {
    float: left;
}

#search {
    float: right;
    margin-top: 30px;
}

.clear {
    clear: both;
}

.not-found {
    text-align: center;
    display: none;
}

.users {
    display: flex;
    flex-wrap: wrap;
}

.user-card {
    flex: 0 0 auto;
    flex-basis: 140px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 5px;
}

.user-image img {
    width: 140px;
    height: 140px;
    border-radius: 5px;
}

.user-info {
    margin-top: 10px;
}

.user-info .name, .user-info .age {
    margin: 0;
}

#template {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab" rel="stylesheet" />

<div class="container">
  <h2>Users:</h2>
  <input type="text" id="search" placeholder="Search by name...">

  <div class="clear"></div>

  <div id="template" class="user-card">
    <div class="user-image">
      <img src="">
    </div>
    <div class="user-info">
      <h4 class="name"></h4>
      <h5 class="age"></h5>
    </div>
  </div>

  <p class="not-found">
    No users found, please change search criteria...  
  </p>

  <section class="users">

  </section>
</div>

【讨论】：

【解决方案2】：

$(document).ready(function(){
    $("#filter").keyup(function(){
 
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
        $("#no-count").text('');
        // Loop through the comment list
        $("nav ul li").each(function(){
 
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
 
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
 
        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
        if(count < 1) {
          $("#no-count").text('No result');
        } else {
          $("#no-count").text('');
        }
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
        <p id="no-count"></p>
    </fieldset>
</form>

<nav>
    <ul>
        <li><a href="#">Jim James</a></li>
        <li><a href="#">Hello Bye</a></li>
        <li><a href="#">Wassup Food</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Bleep bloop</a></li>
        <li><a href="#">jQuery HTML</a></li>
        <li><a href="#">CSS HTML AJAX</a></li>
        <li><a href="#">HTML5 Net Set</a></li>
        <li><a href="#">Node Easy</a></li>
        <li><a href="#">Listing Bloop</a></li>
        <li><a href="#">Contact HTML5</a></li>
        <li><a href="#">CSS3 Ajax</a></li>
        <li><a href="#">ET</a></li>
    </ul>
</nav>

检查这个例子。我希望它能在各个方面对您有所帮助。

【讨论】：

是的，但我不使用
，我使用 users.js 文件和我的用户，这就是为什么我无法理解如何制作它，我发布了 html 代码和 users.js 代码
希望你能得到答案。