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

【问题标题】：How to create live search bar, with data from json file?如何使用 json 文件中的数据创建实时搜索栏？
【发布时间】：2017-01-07 11:21:09
【问题描述】：

美好的一天！

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

基本上，您作为用户想要查找同事信息，您可以使用此实时搜索栏快速过滤 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 文件中打印出数据，但由于某种原因，它没有。

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

【问题讨论】：

标签： jquery angularjs json

【解决方案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">

你应该很高兴。

希望对你有帮助。

【讨论】：

嘿，谢谢你的帮助，但问题是，我很想从 json 文件中获取数据。我的意思是，您所做的是将文件中的数据分配给 $scope。但我希望能够将文件“分配”到 $scope。例如，如果我要替换它，则不必从 json 文件中复制+粘贴数据。对不起，如果我问一些愚蠢的问题，我仍然只是业余爱好者。
很公平，要从 json 文件（或其他来源）获取数据，您可以使用 $http 服务。查看更新的答案。
嘿，我刚刚找到一篇回答了我自己的问题的文章。非常感谢您的时间。 :)
无论如何我建议你放弃JQuery，让Angular内置服务为你完成繁重的工作。很高兴为您提供帮助。

【解决方案2】：

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

typeahead 只能在数组中使用。所以应用过滤器。就是这样

【讨论】：