Angularjs search entire HTML

Question

I am trying to create a search function that will highlight specific text on an Android app (Ionic/Cordova using angularjs).

From all the sample code I referred, I can find something that looks like this:

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                     {name:'Mary', phone:'800-BIG-MARY'},
                     {name:'Mike', phone:'555-4321'},
                     {name:'Adam', phone:'555-5678'},
                     {name:'Julie', phone:'555-8765'},
                     {name:'Juliette', phone:'555-5678'}]"></div>

    Search: <input ng-model="searchText">
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</table>
<hr>

Any: <input ng-model="search.$"> <br>
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>
Equality <input type="checkbox" ng-model="strict"><br>
<table id="searchObjResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friendObj in friends | filter:search:strict">
    <td>{{friendObj.name}}</td>
    <td>{{friendObj.phone}}</td>
  </tr>
</table>

Is there a way to search through an entire HTML document, and not just searching through an array like above?

The best solution I can find is to duplicate the entire text of the HTML in app.js, but that seems a bit redundant and hard to maintain. Surely there's a better way? — ale10ander, Jan 15 '15 at 19:33

score 1 · Accepted Answer · edited May 23 '17 at 12:12

Hey that's intersting...

Anyways came accross :http://www.quora.com/How-does-the-Search-function-in-a-browser-CTRL+F-work which says that it makes use of Knuth–Morris–Pratt algorithm.

Else, if you wish to make use of the native browsers search function: For Android : make use of webview's native function For IOS : Also you can make use of webview, with a js tweak. Check this out and this to search exclusive for pdfs

In Javascript : use the window.find() method to search for keyword in the current as per this article

Good luck, hope you found you were looking for in here.

Angularjs search entire HTML

1 Answers1