Easily Add Search Functions to Your App

I have been adding a Search function to my Cordova PhoneGap apps for a few years now. It is so easy that I want to share it with you who have wondered how to do the same. I use a product that works in Windows, and it creates a search database of all words in the HTML pages using Javascript. I’m using Zoom Search Engine 6.0 Professional Edition, available from http://www.wrensoft.com/zoom/. 

I’m using the software’s CD-ROM Javascript implementation, so all the files are put right on the app. Here are the more notable features I use.

1. I copy the app to my Windows machine, remove all the files I don’t want searched, and put them in a zoom/ folder on my desktop. The folders should be as they appear in the www/ folder. Then I open the Zoom program and the Wizard comes on, which takes me through the steps I need to scan the files. I point the software to the desktop zoom/ location, then specify that I want only HTML files to be searched. Otherwise, one could also search PDF, doc, Shockwave, and so on. Rather than starting the search immediately, I cancel at that point and look at the tabbed options.

2. The Configure screen has many tabbed options. Here are the major ones. The Scan Options tab lets you specify the file extensions to scan (htm, html, txt, and so on).

3. Skip Options allow you to specify words to skip scanning. A skip word list is already supplied, and includes and, or, the, it, and similar common words.

4. The Search Page tab asks you what features you want the user to enable on the page before searching. Includes “Default to ‘match all search words'” (which I have checked), “Show time taken to perform search” (unchecked), “Show Zoom info line” (unchecked), “Provide option to ‘Sort results by date'” (unchecked). You can check them all to see what they are.

The search page was originally styled for the clickable world of the Internet. I altered the CSS to make the buttons large and tappable. The search page is static; that is, it is the same code generated irrespective of the scanning database, which means that I can use the same page in all of my apps. I don’t need to style it over and over. So when the search.html page is generated, I replace it with the search.html page from one of my apps.

5. The Results Layout tab tells me what information should be returned on the search page. All I have checked is “Title of page,” but other options (which I feel only serve to clutter up a mobile window) are available, such as: Result number, Meta description, Image, Terms matched, Score, Date, File size, URL.

The “Title of page” means the words in the <title></title> tags will be returned for the pages containing the search term. So it’s important to make all the title tags meaningful and representative of the information on its page. Please don’t put a generic title on multiple pages, like “Manual.” Depending on your app, this may be the most extensive editing you’ll need to do to your pages to integrate a search page.

6. The Indexing Options tab asks us what parts of a page to include or exclude from indexing. I have checked “Title of page” and “Page content.” You also have the option of Meta description (the content in the <meta> tags), Filename, Link text, ALT text for image links, and so on.

7. The Limits tab specifies the various limits on searches, such as the maximum number of files to index (I put it high enough to include all of my files), and other limits.

8. The Categories tab gives you the option of specifying an option box on the search page to limit the search in certain ways. For instance, I broke down the Bible in an app by sections and specified which files belonged to each section, and the phrase that would appear for that category. So a person could specify “Major Prophets” when doing a search.

9. You can enable the option to highlight the word searched after they tap on the result link. The page will move to show the search term on the screen. To enable this feature, it has to be checked in Zoom, and you need to add this code to the bottom of every page:

<script>highlight();</script>

It was easy to do: just do a multiple-page search-and-replace for “</body>” replacing it with “<script>highlight();</script></body>”

These are the tabs I pay the most attention to; there are several more tabs. The actual scanning takes a few seconds to a few minutes to complete, and it generates four text Javacript files. Those files are placed relative to where they were placed by Zoom Engine. So if you recreated the www/ folder structure of your app, and Zoom saved the js files in the root www/ folder, then those files need to be placed in the same place in order to work. The search.html page references all those js files, so it has to be placed in the same folder as the js files. If you want to move the search.html page to a different folder, then the references in the search.html’s <head> need to be adjusted.

How large are these files? It depends on the amount of words scanned. For instance, scanning the whole Bible results in a 3MB index js file.

I’m very happy with this program and recommend that you try the free version (which allows only a limited number of pages to be searched) and see how well it works for you.

Here is the CSS styling I use for the search.html page for mobile screens. It completely replaces the stock search page’s CSS generated by Zoom:

<style type="text/css">
body { color:#000;}
 .highlight { background: #FFFF40; }
 .searchheading { font-size: 120%; font-weight: bold; color:red; clear:both; float:left;clear:right;margin-top:.5em;}
 .summary { font-size: 120%; font-style: normal; clear:left;float:left;padding-bottom:.5em;}
 .suggestion { font-size: 100%; }
 .results { font-size: 100%; margin-top:.5em;}
 .category { color: #999999; clear:both;float:right;}
 .sorting { text-align: right; }
.result_title { font-size: 120%; } 
 .description { font-size: 100%; color: #000000;}
 .context { font-size: 100%; }
 .infoline { font-size: 110%; font-style: italic; color: #000;padding-top:.5em;padding-bottom:1em;border-bottom:2px dotted gray;}
.zoom_searchform { font-size: 1em; }
 .zoom_results_per_page { font-size: 1em; padding: .3em;margin-left: 0px; clear:left; float:left;}
 .zoom_match { font-size: 100%; margin-left: 0px; clear:left; float:left;} 
 .zoom_categories { font-size: 1em; padding:.3em; }
 .zoom_categories ul { display: inline; margin: 0px; padding: .3em;}
 .zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }

 .cat_summary ul { margin: 0px; padding: 0px; display: inline; }
 .cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }
input.zoom_button { 
font-family:Helvetica, Arial, sans-serif; font-size:1.2em;font-weight:bold;
text-align:left;margin:0;padding:0;float:left; clear:both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:.5em;
height:3em;width:100%;
text-align:center; 
color:#fff;background-color:#333;
}
input.zoom_searchbox { height:2em; width:98%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; font-size:1.5em;
}
select {
width:98%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:1.2em;
} 
 .result_image { float: left; display: block; }
 .result_image img { margin: 10px; width: 80px; border: 0px; }
.result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
 .result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }

.result_pages { font-size: 2em;line-height:2.0em; color:#666;}

.result_pages a { 
border:1px solid black;padding:.3em .5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;background-color:#ccc;}
.result_pagescount { font-size: 1em;float:right;}

.searchtime { font-size: 17px; }

.recommended 
 { 
 background: #DFFFBF; 
 border-top: 1px dotted #808080; 
 border-bottom: 1px dotted #808080; 
 margin-top: 15px; 
 margin-bottom: 15px; 
 }
 .recommended_heading { float: right; font-weight: bold; }
 .recommend_block { margin-top: 1em; margin-bottom: 1em; clear: left; } 
 .recommend_title { font-size: 1px; }
 .recommend_description { font-size: 1px; color: #008000; }
 .recommend_infoline { font-size: 15px; font-style: normal; color: #808080;}
 .recommend_image { float: left; display: block; }
 .recommend_image img { margin: 10px; width: 80px; border: 0px; }
</style>

Android users (both phone and tablet) can download one of my free apps to see this Search feature (and the above CSS) in action: https://play.google.com/store/apps/details?id=com.stevehusting.RC10B42Essentials