If you search something in google, you can see that sentence in your next search as a suggestion. We don't need the server side coding to implement this functionality. We can save all those searching key words in HTML5 local storage and show them in next's user search. Here I have implemented this functionality with AngularJS Material UI.

Program Flow

Observe the below diagram for program flow. Whenever user clicks on submit button, add search text to local storage. Whenever user changes the search text, show filtered key words from local storage in auto complete manner 

Markup Code

Here I have highlighted the main code components
  1. searchByEnter will detect user's actions of typing including enter code functionality
  2. searchText is the value of user's input
  3. querySearch(searchText) will return all filtered results
  4. addSearchQueryTORepo is for adding searchText to local storage
<md-autocomplete ng-keyup="searchByEnter($event)" ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItem" md-search-text-change="searchTextChange(searchText)" md-search-text="searchText" md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchText)" md-item-text="item" md-min-length="0" placeholder="Enter Some text and click on sumbit">
     <md-item-template>
        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item}}</span>
     </md-item-template>
     <md-not-found>
        No matches found for "{{searchText}}".
     </md-not-found>
 </md-autocomplete>
<md-button class="md-raised md-primary" ng-click="addSearchQueryTORepo()">Submit</md-button>

JS Code

Observe below code. Here I have highlighted HTML5 local storage related code.
app.controller('AppCtrl', function($scope) {
    
   $scope.searchByEnter = function($event) {  
     if($event.keyCode == 13) {
       $scope.addSearchQueryTORepo();
       var myEl = angular.element($event.target);
       myEl.blur();
     }
   };
   
   $scope.addSearchQueryTORepo = function() {
     var lowCaseSearchStr = $scope.searchText.toLowerCase();
     var searchQueries = localStorage.getItem("searchQueries");
     var sQrs = [];
     if(searchQueries != null) {
        sQrs = JSON.parse(searchQueries);
        var sind = sQrs.indexOf(lowCaseSearchStr);
        if(sind != -1) {
          sQrs.splice(sind,1);  
        }
          sQrs.splice(0,0,lowCaseSearchStr);
          localStorage.setItem("searchQueries", JSON.stringify(sQrs));
        } else {
          sQrs.splice(0,0,lowCaseSearchStr);
          localStorage.setItem("searchQueries", JSON.stringify(sQrs));
      }
   };
   
   $scope.querySearch = function(query) {
     var st = localStorage.getItem("searchQueries");
     if(st!=null) {
         var states = JSON.parse(st);
         $scope.localStrResults = states;
         var searchResults = [];
         var myQuery = query.toLowerCase();
         for(var i=0;i<states.length;i++) {
           if(states[i].toLowerCase().indexOf(myQuery) != -1) {
             searchResults.push(states[i]);
           }
         }
         return searchResults;   
     }
   };
});

1 comment:

Blogroll

Follow this blog by Email

Popular Posts