Buscador en Tiempo Real con Angular JS y JSON

Conocimiento es poder!

Buscador en Tiempo Real con Angular JS y JSON

Con la gran cantidad de data digital que se crea todos los dias nunca esta demas saber como hacer un buscador para extraer o leer toda esa data.

Por tal razon, en el siguiente post muestro como hacer un buscador en tiempo real con Angular y JSON.

Con “tiempo real” me refiero a que los resultados van apareciendo mientras el usuario va escribiendo sin necesidad de recargar o abrir una pagina nueva.

La aplicación ni siquiera necesita un boton de busqueda. Is like Magic!

En este ejemplo la data que “alimenta” la app es una lista de lugares de entretenimiento en New York City en formato JSON.

La app lee la data del website de Open Data de NYC:

https://data.cityofnewyork.us/resource/2pc8-n4xe.json

ts.entertaiment.js

var tsEntertainmentApp = angular.module('tsEntertainmentApp', []);

tsEntertainmentApp.controller('VenuesListCtrl', function ($scope, $http) {	
	$http.get('https://data.cityofnewyork.us/resource/2pc8-n4xe.json').success(function(data) {
		$scope.venues = data;
		
	});			
});

index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
	<script src="controllers/ts.entertaiment.js"></script>

    <title>Time Square Entertainment Venues</title>
  </head>
  <body ng-app = "tsEntertainmentApp" ng-controller = "VenuesListCtrl">

    <div class="container">       
      <div class="row">
        <div class="col-12 mt-3">
          <h1>Time Square NYC, Entertainment Venues</h1>
            <h5 class="mt-2">TYPE. FIND. ENJOY.</h5>
            <hr />
        </div>
      </div> 	 
      <div class="row">			
        <div class="col-sm-4">		
          <div class="form-group">
            <input ng-model = "query" class="form-control input-lg" placeholder="Enter Keyword">
            {{query}}
          </div>
        </div>
        <div class="col-sm-8">
          <div ng-repeat = "venue in venues | filter:query" class="card shadow p-3 mb-4 bg-white rounded">
            <div class="card-body">
              <h5>{{venue.company_name}}</h5>
                        
              <p>{{venue.subindustry}}</p>
                        
              <p><b>Phone: </b><a href=tel:{{venue.phone}}>{{venue.phone}}</a></p>                       
                        
              <p><b>Location: </b><a href="https://www.google.com/maps/place/{{venue.address}}" target="_blank">{{venue.address}}</a></p>
                        
              <p><a href="{{venue.website}}" title="{{venue.website}}" target="_blank">{{venue.website}}</a></p>                       
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container -->

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  </body>
</html>
Angular, JSON buscador en Tiempo Real
Salida de la app

Facil y rapido verdad?

Con un par de lineas de código JS, un par de lineas de Angular y un poco de Bootstrap puedes hacer un buscador en tiempo real moderno y fácil de usar.

En el siguiente enlace puedes descargar el código fuente,

http://velozityweb.com/blog/wp-content/uploads/2019/02/AngularSearch.zip

Espero les sea util, gracias por leer y compartir. Hasta el próximo post.

Tags: ,

Deja tus comentarios o preguntas!

This site uses Akismet to reduce spam. Learn how your comment data is processed.