不使用基于输入文本框的刷新功能更新表的数据

Question

目标：
当您在 id="searches" 中写入任何字母或数字时，您应该在表格中显示新数据而不刷新网站。使用“刷新”或类似效果的效果是使用 F5 功能。 您更新而不是刷新表。

当您清空输入文本框 (id="searches" ) 时，应显示默认数据。

默认数据是：

<table border="1">
<tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
</table>

问题：
我现在不知道该怎么做才能更新表中的新数据？

信息：
*我正在使用 asp.nget mvc
*我以前使用过 jSon，但我不知道在这种情况下使用它是否相关。也许使用角度或类似的？
*update的定义是从数据库中获取新的信息，过滤表中的当前数据。

谢谢！

<input type="text" name="search" id="searches"><br>

<table border="1">
<tr>
	<th>a</th>
	<th>b</th>
	<th>c</th>
</tr>
<tr>
	<td>1</td>
	<td>2</td>
	<td>3</td>
</tr>
<tr>
	<td>3</td>
	<td>4</td>
	<td>5</td>
</tr>
</table>

Answer 1

试试这样的东西

$('#searches').change(function() {
    $.ajax({
    url:"your serverpage.asp",
    method:"GET"    
    }).done(function(jsonData){
        //do necessary functions to update table contents using the obtained jsonData
    });
});

Answer 2

我不确定 json，但是如果这是问题，你可以用 Angular 来解决。这是针对版本 1 的，但几乎与针对 angular2 的方法相同。请注意，2 仍处于测试阶段。

更新：对不起，误读了问题，这不是添加项目，而是过滤。但对于简单的展示案例，我认为就足够了。

Angular1 解决方案：

你的 js 文件：

 var _text = '';

  $scope.search = {
    text: function(newValue) {
      if (arguments.length) {
        alert('Calling server for new data')
      }
      return arguments.length ? (_text = newValue) : _text;
    }
  };

  $scope.rows = [
    { col1: 'a', col2: 'b', col3: 'c' },
    { col1: '4', col2: '5', col3: '6' },
    { col1: '9', col2: '6', col3: '4' }
  ]

你的html：

<table border="1">
  <tr ng-repeat="row in rows | filter: search.text()">
    <th>{{ row.col1 }}</th>
    <th>{{ row.col2 }}</th>
    <th>{{ row.col3 }}</th>
  </tr>
</table>

https://plnkr.co/edit/F5oU3uTLikm3Kz53iMMQ?p=preview

更新 2：

如果我理解正确，您错过了从后端检索...我可以向您展示基本的，但之后它真的取决于您的需求，如身份验证等

要实现它，您可以将事件添加到搜索框并调用服务器以获取新数据。我更新了 plunker，以便在更改输入后能够调用服务器。