时间戳

首页 > 解决方案 > 我想在 Angular js 中的实时搜索结果中添加按键支持和按键支持。我的搜索结果即将上桌？

javascript - 我想在 Angular js 中的实时搜索结果中添加按键支持和按键支持。我的搜索结果即将上桌？

问题描述

我正在使用该表来显示实时搜索结果。结果显示良好，但我有一个问题，我无法使用向上和向下键浏览搜索结果。

<table class="table table-hover" class="input-text full-width" 
       style="background-color:#f9f9f9; overflow: hidden; ">

    <tbody class="input-text full-width" >
      <tr ng-repeat="city in cities | limitTo:2">
        <td id="start" ng-click="result([[city]],'city')">
            <i class="soap-icon-departure" style="color: #01b7f2; font-size: 16px;  transition-delay: 6s;"></i> &nbsp [[city]]</td>

      </tr>
      <tr ng-repeat="name in names | limitTo:2">
        <td ng-click="result([[name]],'name')">
            <i class="soap-icon-address" style="color:#01b7f2; font-size: 16px;"></i> &nbsp [[name]]</td>

      </tr>
      <tr ng-if="resp">
          <td>No result found</td>
      </tr>
    </tbody>
</table>

标签： javascriptjqueryangularjsajax

解决方案

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $scope.cities = [{
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "City": "London",
      "Country": "UK"
    },
    {
      "City": "London",
      "Country": "UK"
    },
    {
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "City": "Marseille",
      "Country": "France"
    },
    {
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "City": "São Paulo",
      "Country": "Brazil"
    }
  ];
  $scope.names = [{
      "Name": "Alfreds Futterkiste",
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
    },
    {
      "Name": "Antonio Moreno Taquería",
    },
    {
      "Name": "Around the Horn",
    },
    {
      "Name": "B's Beverages",
    },
    {
      "Name": "Berglunds snabbköp",
    },
    {
      "Name": "Blauer See Delikatessen",
    },
    {
      "Name": "Blondel père et fils",
    },
    {
      "Name": "Bólido Comidas preparadas",
    },
    {
      "Name": "Bon app'",
    },
    {
      "Name": "Bottom-Dollar Marketse",
    },
    {
      "Name": "Cactus Comidas para llevar",
    },
    {
      "Name": "Centro comercial Moctezuma",
    },
    {
      "Name": "Chop-suey Chinese",
    },
    {
      "Name": "Comércio Mineiro",
    }
  ];
  $scope.result = function(param1, param2) {
    console.log(param1);
    console.log(param2);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
  <input type='text' ng-model='search'>
  <table>
    <tr ng-repeat="city in cities | filter:search | orderBy:'name' | limitTo:2">
      <td id="start" ng-click="result(city,'City')">
        <i class="soap-icon-departure" style="color: #01b7f2; font-size: 16px;  transition-delay: 6s;"></i> &nbsp {{ city.City}}</td>
    </tr>
    <tr ng-repeat="name in names | filter:search | orderBy:'name' | limitTo:2">
      <td ng-click="result(name,'Name')">
        <i class="soap-icon-address" style="color:#01b7f2; font-size: 16px;"></i> &nbsp {{ name.Name}}</td>

    </tr>
  </table>
</div>

注意：- angularjs 过滤器请阅读 angular js 提供的文档。角度默认搜索将提供键和页面搜索。

推荐阅读