javascript - 使用 jQuery 进行搜索后，搜索栏就会消失

Question

所以我尝试在 jQuery 中实现搜索栏功能。我在 StackOverflow 上偶然发现了一个非常好的解决方案，它显然对其他人有用。但是，当我尝试实现搜索功能时，搜索栏会在有人开始输入时消失。我将不胜感激任何帮助!

var employeesById = {
  "8110923": {
    "Name": "John Glanton",
    "Position": "Chief Executive",
    "Hire Date": "2008-01-15"
  },
  "7734981": {
    "Name": "Samuel Chamberlain",
    "Position": "Sales",
    "Hire Date": "2012-05-01"
  },
  "3400981": {
    "Name": "Louis Toadvine",
    "Position": "Customer Support",
    "Hire Date": "2011-08-24"
  },
  "5517823": {
    "Name": "Ben Tobin",
    "Position": "Developer",
    "Hire Date": "2013-03-19"
  },
  "4587234": {
    "Name": "David Brown",
    "Position": "Director of HR",
    "Hire Date": "2012-01-10"
  }
}

var wrapper = $('#employees'),
  container;
for (var key in employeesById) {
  container = $('<div class="employee"></div>');
  wrapper.append(container);
  container.append('<span class="name">' + employeesById[key]["Name"] + ' ' + '</span>');
  container.append('<span class="position">' + employeesById[key]['Position'] + ' ' + '</span>');
  container.append('<span class="hireDate">' + employeesById[key]['Hire Date'] + ' ' + '</span>');
  container.append('<span class="id">' + key + ' ' + '</span>');
}



function compare(a, b) {
  if (a.last_nom < b.last_nom)
    return -1;
  if (a.last_nom > b.last_nom)
    return 1;
  return 0;
}

$("#search").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $(".controls .control input").each(function() {
    var s = $(this).text().toLowerCase();
    $(this).closest('.control')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
  });
});

body {
  font-family: Arial;
  margin-bottom: 1000px;
}

.instructions {
  font-family: Times New Roman;
  width: 500px;
}

.controls {
  margin-top: 20px;
  margin-left: 12px;
  margin-bottom: 12px;
}

.control {
  padding-bottom: 4px;
}

.employees {
  width: 300px;
  margin-left: 12px;
}

.employee {
  border: 1px solid black;
  padding: 4px 4px 4px 4px;
  margin-bottom: 8px;
}

.employee .name {
  font-size: 14pt;
}

.employee .position {
  display: block;
}

.employee .hireDate {
  display: block;
  font-size: 10pt;
}

.employee .id {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instructions">
  You have been asked to modify this HTML page using javascript and CSS to make it interactive. If you look at the source of this page, you will find a javascript variable named "employeesById" containing employee information. Your job is to display that
  information in a user-friendly way and enable simplistic sorting and searching of that data.

  <p>You will do all of this <em>without</em> a server; you should implement this purely using javascript, HTML and CSS. To implement your solution, <b>please modify 
the source of this HTML page</b>. (Do not create a new file.)

    <p>In your implementation you may use jQuery, or you may do it without using a javascript framework at all. jQuery is already included in the page. Please do not import any other javascript libraries. You are free to use the internet to lookup API references
      or get any tips you need.

      <p>Here are the specific requirements you have been asked to implement:
        <ol>
          <li>A "business card" should be shown for each employee. A sample business card for John Glanton has been included for reference, but you should change this so the data is taken from employeesById for all employees rather than being hardcoded HTML.
            Please match the current style exactly.</li>
          <li>The user should be able to choose to sort by Name or ID, and the business cards should be immediately re-rendered in that order. (You can sort Name exactly as it appears - you don't need to extract the last name and order by that first.)</li>
          <li>The user should be able to type in a partial employee name. You should match this against business cards by employee name, case insensitively, with an implicit "wildcard" before and after the typed string. Any business cards not matching this
            should be removed. <b>For example:</b> if one types "b" it should show Ben Tobin, David Brown and Samuel Chamberlain. But once the user types "br", it should show only David Brown.</li>
          <li>We would like the user's ID to appear in the top right corner of each business card. Using CSS only (i.e. do not change the HTML markup), move the ID to the top right of each card.</li>
        </ol>

        <p>Your solution will be graded based on the following criteria:
          <ul>
            <li>Accurate implementation of each of the requirements listed above</li>
            <li>Clarity and conciseness of code</li>
          </ul>
</div>
<hr/>
<div class="controls">
  <div class="control">Search:
    <input type="text" name="search" id="search" />
  </div>
  <div class="control">Sort:
    <select name="sort" id="sort" onchange="myFunction()">
      <option name="Name">Name</option>
      <option name="ID">ID</option>
    </select>
  </div>
</div>
<div id="employees">

</div>

Fiddle

Answer 1

您正在搜索搜索字段本身。我假设这不是您想要搜索的内容，而是您想搜索您的 .employee 元素。

如果是这样，只需修改该代码块以搜索 $('.employee').text() 即可。

var employeesById = {
  "8110923": {
    "Name": "John Glanton",
    "Position": "Chief Executive",
    "Hire Date": "2008-01-15"
  },
  "7734981": {
    "Name": "Samuel Chamberlain",
    "Position": "Sales",
    "Hire Date": "2012-05-01"
  },
  "3400981": {
    "Name": "Louis Toadvine",
    "Position": "Customer Support",
    "Hire Date": "2011-08-24"
  },
  "5517823": {
    "Name": "Ben Tobin",
    "Position": "Developer",
    "Hire Date": "2013-03-19"
  },
  "4587234": {
    "Name": "David Brown",
    "Position": "Director of HR",
    "Hire Date": "2012-01-10"
  }
}

var wrapper = $('#employees'),
  container;
for (var key in employeesById) {
  container = $('<div class="employee"></div>');
  wrapper.append(container);
  container.append('<span class="name">' + employeesById[key]["Name"] + ' ' + '</span>');
  container.append('<span class="position">' + employeesById[key]['Position'] + ' ' + '</span>');
  container.append('<span class="hireDate">' + employeesById[key]['Hire Date'] + ' ' + '</span>');
  container.append('<span class="id">' + key + ' ' + '</span>');
}



function compare(a, b) {
  if (a.last_nom < b.last_nom)
    return -1;
  if (a.last_nom > b.last_nom)
    return 1;
  return 0;
}

$("#search").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $(".employee").each(function() {
    var s = $(this).text().toLowerCase();
    $(this)[s.indexOf(g) !== -1 ? 'show' : 'hide']();
  });
});

body {
  font-family: Arial;
  margin-bottom: 1000px;
}

.instructions {
  font-family: Times New Roman;
  width: 500px;
}

.controls {
  margin-top: 20px;
  margin-left: 12px;
  margin-bottom: 12px;
}

.control {
  padding-bottom: 4px;
}

.employees {
  width: 300px;
  margin-left: 12px;
}

.employee {
  border: 1px solid black;
  padding: 4px 4px 4px 4px;
  margin-bottom: 8px;
}

.employee .name {
  font-size: 14pt;
}

.employee .position {
  display: block;
}

.employee .hireDate {
  display: block;
  font-size: 10pt;
}

.employee .id {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr/>
<div class="controls">
  <div class="control">Search:
    <input type="text" name="search" id="search" />
  </div>
  <div class="control">Sort:
    <select name="sort" id="sort" onchange="myFunction()">
      <option name="Name">Name</option>
      <option name="ID">ID</option>
    </select>
  </div>
</div>
<div id="employees">

</div>