Replace the drop-down list of articles by an HTML unordered list (ul/li)

Make back/forward buttons work again
Implement "search as you type" feature. Fixes #27

index.html

@@ -82,27 +82,26 @@
             <br /> Please select the archive you want to use : <select id="archiveList"></select>
         </div>
         <br />
-        <form class="form-search">
+        <form id="formTitleSearch" class="form-search">
             <div class="input-append">
                 <input type="text" id="prefix" value="" placeholder="Find titles starting with..." class="input-medium search-query"/>&nbsp;
                 <a class="btn" id="searchTitles" href="#"><i class="icon-search"></i></a>
             </div>
             <img id="searchingForTitles" src="img/spinner.gif"  style="display: none;"/>
         </form>
-        <br /> Choose a title from the filtered list :
-        <select id="titleList"></select>
+        <!-- List of articles matching the typed prefix -->
+        <ul id="titleList">
+        </ul>
         <br />
-        <br />
-        <input type="button" id="readData" value="Read article from dump" class="btn"/>
         <div id="readingArticle" style="display: none;">
             Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
         </div>
         <div id="articleContent">&nbsp;</div>
         <br />
         <div id="navigationButtons" class="btn-toolbar">
-             <a class="btn" id="btnBack" href="#"><i class="icon-arrow-left"></i></a>
-             <a class="btn" id="btnForward" href="#"><i class="icon-arrow-right"></i></a>
-             <a class="btn" id="btnAbout" href="#"><i class="icon-question-sign"></i></a>
+             <a class="btn" id="btnBack"><i class="icon-arrow-left"></i></a>
+             <a class="btn" id="btnForward"><i class="icon-arrow-right"></i></a>
+             <a class="btn" id="btnAbout"><i class="icon-question-sign"></i></a>
         </div>
 
         <!-- Using require.js, a module system for javascript, include the

js/app.js

@@ -22,20 +22,20 @@ define(function(require) {
     $('#searchTitles').on('click', function(e) {
         searchTitlesFromPrefix($('#prefix').val());
     });
-    $('#readData').on('click', function(e) {
-        var titleId = $('#titleList').val();
-        findTitleFromTitleIdAndLaunchArticleRead(titleId);
-        var title = evopedia.Title.parseTitleId(localArchive, titleId);
-        pushBrowserHistoryState(title.name);
+    $('#formTitleSearch').on('submit', function(e) {
+        document.getElementById("searchTitles").click();
+        return false;
     });
     $('#prefix').on('keyup', function(e) {
         onKeyUpPrefix(e);
     });
     $('#btnBack').on('click', function(e) {
         history.back();
+        return false;
     });
     $('#btnForward').on('click', function(e) {
         history.forward();
+        return false;
     });
 
     // Detect if DeviceStorage is available
@@ -125,42 +125,66 @@ define(function(require) {
     }
 
     /**
-     * Handle Enter key in the prefix input zone
+     * Handle key input in the prefix input zone
      */
     function onKeyUpPrefix(evt) {
-        if (evt.keyCode == 13) {
-            document.getElementById("searchTitles").click();
+        // Use a timeout, so that very quick typing does not cause a lot of overhead
+        // It is also necessary for the words suggestions to work inside Firefox OS
+        if(window.timeoutKeyUpPrefix) {
+            window.clearTimeout(window.timeoutKeyUpPrefix);
         }
+        window.timeoutKeyUpPrefix = window.setTimeout("document.getElementById('searchTitles').click()",500);
     }
 
 
-
     /**
      * Search the index for titles that start with the given prefix (implemented
      * with a binary search inside the index file)
      */
     function searchTitlesFromPrefix(prefix) {
         $('#searchingForTitles').show();
+        $('#articleContent').empty();
         if (localArchive.titleFile) {
-            localArchive.findTitlesWithPrefix(prefix.trim(), populateDropDownListOfTitles);
+            localArchive.findTitlesWithPrefix(prefix.trim(), populateListOfTitles);
         } else {
             alert("Title file not set");
         }
     }
 
+  
     /**
-     * Populate the drop-down list of titles with the given list
+     * Display the list of titles with the given array of titles
      */
-    function populateDropDownListOfTitles(titleList) {
-        var comboTitleList = document.getElementById('titleList');
+    function populateListOfTitles(titleArray) {
+        var titleListUl = $('#titleList');
         // Remove previous results
-        comboTitleList.options.length = 0;
-        for (var i = 0; i < titleList.length; i++) {
-            var title = titleList[i];
-            comboTitleList.options[i] = new Option(title.name, title.toStringId());
+        titleListUl.empty();
+        for (var i = 0; i < titleArray.length; i++) {
+            var title = titleArray[i];
+            var titleLi = document.createElement('li');
+            var titleA = document.createElement('a');
+            titleA.setAttribute("titleId", title.toStringId());
+            $(titleA).append(title.name);
+            $(titleA).on("click",handleTitleClick);
+            $(titleLi).append(titleA);
+            titleListUl.append(titleLi);
         }
         $('#searchingForTitles').hide();
     }
+    
+    
+    /**
+     * Handles the click on a title
+     * @param {type} event
+     * @returns {undefined}
+     */
+    function handleTitleClick(event) {
+        var titleId = event.target.getAttribute("titleId");
+        $("#titleList").empty();
+        findTitleFromTitleIdAndLaunchArticleRead(titleId);
+        var title = evopedia.Title.parseTitleId(localArchive, titleId);
+        pushBrowserHistoryState(title.name);
+    }
 
 
     /**