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

28 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. 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
  5. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me. auto reply text

    ReplyDelete
  6. The wild nature of Albania welcomes you to try the offroad experiences making you feel the adrenaline inside your bones. Discover Albania

    ReplyDelete
  7. Awesome post which you have shared with me, I am working as a marketer, this post will improve my SEO
    dissertation help uk

    ReplyDelete
  8. A substandard post with all vital information about the best Assignment Help in UK as well as all over world. Looking forward to availing the top-quality services. Kindly visit LiveWebtutors in UK for good Assignment Help services.

    ReplyDelete
  9. Knowing the amount of stress each student undergoes when writing a paper, it is recommended to buy fresh essays so that to ease your academic life.

    ReplyDelete
  10. After a long time, I read a very beautiful and very important article that I enjoyed reading. I have found that this article has many important points, I sincerely thank the admin of this website for sharing it. Get for more information Dent Removal Newport Beach CA

    ReplyDelete
  11. I didn't get a word from the article you posted above. Seriously, it is easier for me to buy pre written essays on the related topic. To be honest, if I had to write it by myself, I wouldn't even know from were to start. This is to complecated.

    ReplyDelete
  12. Writing a college essay can be a challenge. There is a good chance that this is precisely why you have stumbled upon https://writer-elite.com/essay-writing-service/

    ReplyDelete
  13. Luxury rentals aim to give you an evening of your life with your girl on one side and such a classy ride on the other. Of course, if you intend to use up the back seat of the car with your girl, make sure to hire a discreet chauffeur. luxury car rental

    ReplyDelete
  14. This is very interesting and educative blog. You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your great post. Thank you for sharing. Also visit cut off mark for biochemistry in fulokoja

    ReplyDelete
  15. Get an amazing experience with a Miami exotic car rental by mph club that's in Miami Florida on your next trip. Miami exotic car rental

    ReplyDelete
  16. Anyone suggest me what are the assignment proofreading service in USA for Psychology students. I have five-six assignments to proofread, and I’m willing to pay so it would be good amount. Also, since the number of assignments is good, I would like to know the websites that offer discounts. Let me know please.

    ReplyDelete
  17. Dissertation Writing Help is a long essay written on a specific subject. It's one of the main responsibilities in your academic journey. editing and marking services, all with the same level of academic excellence as you enjoy. If you are a shining star in your academic field you must complete your research paper with nativeassignmenthelp. We can help you through the PhD research.

    ReplyDelete
  18. Searching for Homework Help in London (UK) students who are struggling with their homework assignment than our little assistance could help them to get back on the track Team of experts available 24/7 to help you in Your Last Minute Homework submission at Lowest Rates.

    ReplyDelete
  19. We offer online Assignment Help Australia via Ph.D. writers at affordable prices. Secure your A+ grade and feel free to get reliable writing services online .

    ReplyDelete
  20. Take Essay Assignment Help from an Australian assignment provider. We have the best Australian helpers who can help you achieve A+ Grades in your courses. Free Sample.

    ReplyDelete
  21. Doing python assignments and every time need of Write My Python Assignment in UK for students. Computer programming can be more difficult at times as people find it hard to learn. Python subject here makes it easy for them by providing clearer language and programs for running successful operations.Native Assignment Help has the best expert writers to do assignment and they assured your A++ grades.

    ReplyDelete
  22. We have got you Case Study Help for every such student who intends to score well when it comes to case studies. All it takes is just some small efforts to grab the writing services wherein you will be facilitated with all the basic necessities. Native Assignment Help has the best Assignment writers with experience. They are guaranteed to ensure your A++ grades.

    ReplyDelete
  23. hire someone to do assignment You can talk to our leading assignment writing services in Karachi and can have the remote authors to work on your necessities.

    ReplyDelete
  24. If you are looking for help with your Economics Homework Help 2023, then this is the right place for you. We have a wide range of topics that you can choose from, and we will help you narrow down your options so that you can choose the perfect topic for your homework. Our Assignment Help Services cover a range of different areas including marketing, management, human resources, and more. So, what are you waiting for? Get started today!

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. The optimized plant and piping system designs I got through their Chemical Engineering Assignment Help played a major role in helping me secure top grades this semester. Their service is well-organized and extremely professional.

    ReplyDelete

Blogroll

Popular Posts