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

10 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
  5. I took a keen interest in reading this blog. The blog was interesting, valuable content was given which is easily readable & understood. I too have a reference of one of the top android app development company where experts are highly compatible and provide unique solutions.

    ReplyDelete
  6. Excellent and nice post. It will beneficial for everyone. Thanks for sharing such a wonderful post. Avail No 1 custom essay writing help UK from certified PhD writers. It is extremely helpful for me. You can email us at info@ukdissertationhelp.co.uk or Phone Number - 020 8144 9988

    ReplyDelete
  7. Very efficiently written information. It will be beneficial to anybody who utilizes it, including me. Keep up the good work. For sure i will check out more posts. This site seems to get a good amount of visitors. auto repair Freehold NJ

    ReplyDelete
  8. thank you.
    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  9. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info  paintless dent repair

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts