javascript - switch - Cuadro de búsqueda similar a Google con una directiva AngularJS
ng-model (1)
Ejecuto algo similar en mi sitio actualmente. Sin embargo, no envolví mi búsqueda en una directiva porque es su propia página.
Para site.com/search cómo lo tengo configurado, tengo una página de búsqueda site.com/search (que sería su página de inicio, por ejemplo) Esa página tiene su propio controlador / vista SearchController . En la misma página se encuentra un contenedor separado que esencialmente puede enumerar elementos que están dentro de una matriz. Finalmente, toda la página tiene un ApplicationController .
Ahora, SearchController y ApplicationController están obviamente separados y, por lo tanto, no pueden acceder a las propiedades o métodos de los demás. Sin embargo, lo que pueden hacer es compartir una fábrica / servicio o transmitir información. Por la simplicidad de este ejemplo, les pediremos que compartan un servicio llamado SearchService .
Si aún desea utilizar una directiva, puede convertir fácilmente el SearchController en una directiva y utilizar el mismo concepto para usted.
SearchService
SearchService contendrá propiedades y métodos útiles para realizar búsquedas, pero todo lo que necesita en este momento es simplemente una Array para contener una lista de resultados de búsqueda.
myApp.factory(''SearchService'', function() {
var SearchService;
SearchService = {};
// The array that will contain search results
SearchService.arrSearchResults = [];
return SearchService;
}
);
ApplicationController
El ámbito ApplicationController tendrá una referencia a SearchService para que pueda usar ng-repeat y enumerar los contenidos reales de los resultados de búsqueda.
myApp.controller(''ApplicationController'', [
''$scope'', ''SearchService'', function($scope, SearchService) {
// Create a reference to the SearchService and add it to the
// $scope so it will be available on the page
$scope.searchService = SearchService;
}
]);
SearchController
El ámbito de SearchController también tendrá una referencia a SearchService para que pueda modificar la matriz SearchService.arrSearchResults , lo que alterará lo que se mostrará en la página. También contendrá métodos para interactuar con el formulario.
También alterará la ubicación de la URL cuando se ejecute una búsqueda.
myApp.controller(''SearchController'', [''$scope'', ''SearchService'', ''$http'', ''$location'', function($scope, SearchService, $http, $location) {
// Your search input
$scope.blab = "";
// Your search function
$scope.search = function() {
// Make sure blab has content (always good to double check)
if($scope.blab != "") {
// Alter URL to show new request
$location.search(''q'', $scope.blab);
// Make a GET request to your URL that will
// return data for you to populate
$http.get(''/someUrl'').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
alert("Search results found!");
// Assuming the data returned is a list of items
// or object items
// (i.e. [ "Search Result1", "Search Result2", ... ]
SearchService.arrSearchResults = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
alert("Something failed! No results found!");
// Empty the array of search results
// to show no results
SearchService.arrSearchResults = [];
});
};
}]);
La página
<!doctype html>
<head>
<title>Search Example Page</title>
<!-- Insert Angular.JS source files here -->
</head>
<body ng-controller="ApplicationController" ng-app="myApp">
<!-- ngView -->
<div role="main" data-ng-view>
</div>
<!-- Search Results -->
<div ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid #000">Search Result: <br/>{{searchItem}}</p>
</div>
</body>
</html>
Pestañas
Para cambiar el tipo de resultado de búsqueda (web, imagen, etc.), puede crear una variable dentro del SearchService que controle el estado de la búsqueda y, por lo tanto, qué tipo de búsqueda ejecutar.
SearchService.typeOfSearch = "web"; Esto establece el estado en la web y, por lo tanto, se puede interactuar dentro de la página y la aplicación.
Luego puede tener varias ng-repeat toda la página, todas mostrando resultados para diferentes estados:
<!-- Search Results - Web -->
<div ng-if="searchService.typeOfSearch=''web''" ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid blue">Search Result: <br/>{{searchItem}}</p>
</div>
<!-- Search Results - Image -->
<div ng-if="searchService.typeOfSearch=''image''" ng-repeat="searchItem in searchService.arrSearchResults">
<p style="border-bottom: 2px solid red">Search Result: <br/>{{searchItem}}</p>
</div>
He actualizado el Plunkr para demostrar.
Estoy escribiendo una aplicación que UI wise es casi exactamente como Google. Llego a la página de destino. Tengo un cuadro de búsqueda que al enviarlo lo dirige a la página de resultados. Aquí tiene el mismo cuadro de búsqueda y otras directivas en las que puede cambiar de modo: por ej. web, imagen. Actualmente tengo:
en la página de inicio: form con action = "results.html" que pasa los parámetros en la url.
<form name="search" role="form" action="results.html">
<div class="input-group input-group-search">
<input type="text" class="form-control" ng-model="blab" name="q" required>
<span class="input-group-addon">
<button class="btn-search" ng-disabled="search.$invalid">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
<input type="hidden" name="mode" value="web"/>
</div>
</form>
en los resultados solo estoy usando ng-submit = "search ()" y ng-model en la entrada. El cuadro de búsqueda está dentro del searchController.
¿Cuál es el método correcto para hacer esto como una directiva personalizada, con el siguiente comportamiento:
- En la página de destino en enviar directamente a la página de resultados
- En la página de resultados, realice una búsqueda sin volver a cargar la página y cambie la ubicación a los parámetros correctos.