Question

我想在表格中放置Search Text Box，类似于下图。

通过Search Text Box，我们将能够通过搜索框搜索表格中的项目。

我在我的表Plunker Demo中使用此示例，但这不符合我的要求。

需要一些`css`需要改进！

// Instantiate the app, the 'myApp' parameter must 
// match what is in ng-app
var myApp = angular.module('myApp', []);

// Create the controller, the 'ToddlerCtrl' parameter 
// must match an ng-controller directive
myApp.controller('ToddlerCtrl', function ($scope) {
  
  // Define an array of Toddler objects
  $scope.toddlers = [
    {
      "name": "Toddler One",
      "birthday": "1/1/2011",
      "happy": true
    },
    {
      "name": "Toddler Two",
      "birthday": "2/2/2011",
      "happy": true
    },
    {
      "name": "Toddler Three",
      "birthday": "3/3/2011",
      "happy": false
    }
  ];
  
});
myApp.directive('multiwareswitchitem', function() {
      return {
          restrict: 'E',
          scope: {
              value: '='
          },
          template: '<div>{{value.name}}  <div><small> Birthday {{value.birthday}} </div></small></div>'
      };
  });

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    <style>
    .switchBox td {
        padding-right: 64px;
    }
    .switchBox .entBox {
        overflow:auto;height:10em; width:300px; border:1px solid #cccccc;  border-radius: 4px;float:left; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); padding-left: 15px; padding-top: 10px;focus: {border-color: #66afe9;};
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;

    }
    .switchBox .entBox div:hover {
        background-color: #3875D7;
    }
    .switchBox .entBox:focus {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .switchBox .eBox2.entBox {
        background-color: #444;
    }
</style>
  </head>
  <body>
    <div ng-controller="ToddlerCtrl">
      <table>
        <tr>
            <th>All Toddler*  
            <input type="text" name="fname" placeholder="Search City" ng-model="search.name">
           </th>
        </tr>
        <tr class="switchBox">
            <td>
                <div class="entBox">                        
                    <multiwareswitchitem ng-repeat="item in toddlers |filter: search" value="item">       
                    </multiwareswitchitem>                        
                </div>
            </td>
        </tr>
     </table>
    </div>
  </body>
</html>

    <table id="table">
<tr>
<td><input type="text" id="search" placeholder="Type to search"></td></tr>

   <tr>
      <td>Apple</td>

   </tr>
   <tr>
      <td>Grapes</td>

   </tr>
   <tr>
      <td>Orange</td>

   </tr>
</table>

在上面的示例中，您可以看到搜索框不在表格内，而css并不令人印象深刻，我需要像下面这样的表格

Answer 1

在几次讨论后更新了答案：

使用AngularJS ui-select

演示：http://plnkr.co/edit/wmZw5leDPN6PGcWk260B?p=preview

初步答复：

尝试以下代码段改进版的代码段。

＆＃13;

var $rows = $('#table tbody tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

＆＃13;

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
  <tr>
     <th>
       <input type="text" id="search" placeholder="Type to search">
     </th>  
  </tr>
</thead>
<tbody>
<tr>
      <td>Apple</td>
   </tr>
   <tr>
      <td>Grapes</td>
   </tr>
   <tr>
      <td>Orange</td>
   </tr>
</tbody>
</table>

＆＃13;

Answer 2

以下是您想要的一些好例子。希望它对您有用，您将得到您想要的......

http://www.vijayjoshi.org/2011/01/03/searching-text-in-a-html-table-using-jquery/

...

http://www.wrensoft.com/zoom/support/searchbox.html

将搜索框放在html中的表视图中

需要一些`css`需要改进！

2 个答案:

在几次讨论后更新了答案：

初步答复：

将搜索框放在html中的表视图中

需要一些css需要改进！

2 个答案:

在几次讨论后更新了答案：

初步答复：

需要一些`css`需要改进！