Databases
StackOverflow2013
Postsdbo
POHow to load a new page with AngularJS when a user start typing in an input box
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to load a new page with AngularJS when a user start typing in an input box
    primarykey
    data
    text
    <p>My route /search shows a Template and related Controller that are showing a list of entries from my database (properly binding data using from the Controller to the Template using the $scope variable). So if I go to /search it just works and shows data.</p> <p>Now I have added a search box at the top of my page. When the user starts typing, wherever he is on the website, I would like to show results instantly (showing Template with results).</p> <p>What is the Angular way to do that? </p> <hr> <p><strong>Here is my how I finally did it:</strong></p> <p>My route:</p> <pre><code>App.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: '&lt;%= asset_path "welcome/index.html" %&gt;' }); $routeProvider.when('/search', { templateUrl: '&lt;%= asset_path "search/index.html" %&gt;', controller: 'SearchController' }); $routeProvider.otherwise({ redirectTo: '/' }); }]); </code></pre> <p>The global layout:</p> <pre><code>&lt;form class="navbar-form navbar-left" role="search" data-ng-controller="SearchController"&gt; &lt;div class="form-group"&gt; &lt;input type="text" class="form-control" placeholder="search" data-ng-model="query" /&gt; &lt;/div&gt; &lt;button type="submit" class="btn btn-default"&gt;Search&lt;/button&gt; &lt;/form&gt; &lt;div data-ng-view&gt;&lt;/div&gt; </code></pre> <p>The Controller:</p> <pre><code>angular.module('tastyPie.controllers') .controller('SearchController', function($scope, Search) { // Bind to the view $scope.searchResults = []; $scope.query = ''; // if the user is not on the search page and start typing, move him to the search page and perform a search $scope.$watch('query', function(new_data, old_data) { if (new_data == old_data) return; if ($location.path().indexOf('/search') &lt; 0) $location.path('search'); $scope.search(); }); $scope.search = function() { var s = new Search(); s.query = $('#query').val(); s.execute(); }; // callback from the search services which returns the results $scope.$on('searchResults', function(object, results){ $scope.searchResults = results; }); }); </code></pre> <p>And the template search/index.html :</p> <pre><code>&lt;ul class="list-group" ng-init="search()"&gt; &lt;li class="list-group-item" ng-repeat="result in searchResults"&gt; &lt;strong&gt;{{result.title_texts}}&lt;/strong&gt; &lt;br /&gt; {{result}} &lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVincent Peres
    1. USVincent Peres
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to load a new page with AngularJS when a user start typing in an input box
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to load a new page with AngularJS when a user start typing in an input box
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou should create a directive for that in AngularJS
      singulars
      1. POHow to load a new page with AngularJS when a user start typing in an input box
      1. USBKM
    2. COThe angular way is to execute an HTTP request each time the entered value changes, and display the result using an ng-repeat directive, for example. Read the doc for input[type=text], ngRepeat, and $http.
      singulars
      1. POHow to load a new page with AngularJS when a user start typing in an input box
      1. USJB Nizet
    3. COI did a proper binding of my data using the $scope variable between my controller and template (and using $http, ng-repeat). I just can't figure out how to show all of this when a user start typing a query?
      singulars
      1. POHow to load a new page with AngularJS when a user start typing in an input box
      1. USVincent Peres
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload