javascript - 将搜索框放在 html 表格 View 中

标签 javascript jquery html css angularjs

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 7 年前。

Improve this 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 也不是很好，我需要如下图所示的表格

最佳答案

经过几次讨论后更新的答案:

使用AngularJS ui-select

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

初始答案:

尝试下面的代码片段，它是您代码的改进版本。

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

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

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

关于javascript - 将搜索框放在 html 表格 View 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34477990/