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

BRD 发表于 Dev

BRD

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

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

我也需要让它不区分大小写，如果没有结果显示段落类=“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>

普隆詹

这是一个简单的例子。它应该包含您需要的所有内容

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。