Question

美好的一天！

所以，最近我尝试制作我的第一个单页应用。在过程中，我制作了一些基本模板，但后来我想添加实时搜索功能。

基本上，作为用户想要查找同事信息，您可以使用此实时搜索栏快速筛选json对象，直到找到他的数据。

由于某种原因，我无法从json文件中获取信息。

这是我的code

因为，为了快速了解我的问题，你需要查看我的所有文件，我添加了链接到Plunker，但由于我需要附带一些代码的链接，这里将是搜索脚本，它应该获取json数据，以及关于.html，其中应放置数据。

Search.js

$('#search').keydown(function(){
$.getJSON("data.json",function(data){
var search = $('#search').val();
var regex = new RegExp(search, 'i');
var output;
$.each(data, function(key, val){
if((val.id.search(regex) != -1 ) || (val.name.search(regex) != -1)){
    output += "<tr>";
    output += "<td id='"+key+"'>"+val.id+"</td>";
    output += "<td id='"+key+"'>"+val.name+"</td>";
    output += "<td id='"+key+"'>"+val.email+"</td>";
    output += "<td id='"+key+"'>"+val.phone+"</td>";
    output += "<td id='"+key+"'>"+val.city+"</td>";
    output += "</tr>";
  }
});
$('tbody').html(output);
});
})

about.html

<div class="jumbotron text-center">
<h1>About us</h1>
<div class="container" style="padding:50px 250px;">
    <form role="form">
        <div class="form-group">
          <input type="search" class="form-control input-lg" id="search" placeholder="Type your search character">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>City</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
    </form>
</div>

所以，应该发生的事情是，当你写信时，脚本应该打印出json文件中的数据，但由于某种原因，它没有。

我的问题，这个问题的原因是什么？

Answer 1

如果我正确理解您的要求，您只需要使用Angular filter，然后就可以了，不需要jQuery。

看看这个plunkr

基本上，您可以将json分配给$scope上的变量，也可以使用$http服务来获取数据，如下所示：

simpleApp.controller('aboutController', function($scope, $http) {
  $http.get('data.json').then(function(response) {
   $scope.data = response.data;
  });

});

在您的视图中对其进行迭代，然后像这样添加filter：

<tr ng-repeat="d in data | filter:search">
  <td>{{d.id}}</td>
  <td>{{d.name}}</td>
  <td>{{d.email}}</td>
  <td>{{d.phone}}</td>
  <td>{{d.city}}</td>
</tr>

在您的输入中添加ng-model：

<input type="search" ng-model="search" class="form-control input-lg" id="search" placeholder="Type your search character">

你应该好好去。

希望它有所帮助。

Answer 2

您可以使用Angular-bootstrap typeahead来实现此目的。这里的示例：https://angular-ui.github.io/bootstrap/。

预先输入只能在数组中使用。所以应用过滤器。就是这样

如何使用json文件中的数据创建实时搜索栏？

美好的一天！

2 个答案: