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
- searchByEnter will detect user's actions of typing including enter code functionality
- searchText is the value of user's input
- querySearch(searchText) will return all filtered results
- 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; } }; });
8++8
ReplyDeleteThank 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.
ReplyDeleteWe 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.
ReplyDeleteThe 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.
ReplyDeletePretty 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
ReplyDeleteThanks 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
ReplyDeleteThe wild nature of Albania welcomes you to try the offroad experiences making you feel the adrenaline inside your bones. Discover Albania
ReplyDeleteAwesome post which you have shared with me, I am working as a marketer, this post will improve my SEO
ReplyDeletedissertation help uk
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.
ReplyDeleteKnowing 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.
ReplyDeleteAfter 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
ReplyDeleteI 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.
ReplyDeleteWriting 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/
ReplyDeletedarthvadertv.com
ReplyDeletedarthvadertv.com
darthvadertv.com
darthvadertv.com
darthvadertv.com
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
ReplyDeleteThis 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
ReplyDeleteGet 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
ReplyDeleteAnyone 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.
ReplyDeleteDissertation 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.
ReplyDeleteSearching 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.
ReplyDeleteWe 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 .
ReplyDeleteTake 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.
ReplyDeleteDoing 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.
ReplyDeleteWe 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.
ReplyDeletehire 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.
ReplyDeleteIf 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!
ReplyDeleteThis comment has been removed by the author.
ReplyDelete