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;   
     }
   };
});

5 comments:

  1. Thank you for informative instruction. Let me share it in my blog https://app-reviews.org/develop-an-amazing-android-app/ cause my readers are interested in HTML5 update too.

    ReplyDelete
  2. We just need to complete this blog reading and have some new learning ideas. I would like to share this blog with people who are good in research writing services production. It is because we will have new learning concepts and ideas after reading this blog.

    ReplyDelete
  3. The final yr students of the universities are so very busy in their guidance for checks that they do not have time to write an assignment, so they try to lease the specialists like college mission help UK who can provide you with excellently written assignments for them. They Custom Assignment Writing Service within the cut-off date.

    ReplyDelete

  4. A high-standard post with all imperative information about Assignment Help UK services. Looking forward to avail the premium services.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts