From b1e0a43e70ddd22d16dc8bc7266288c2c1d67438 Mon Sep 17 00:00:00 2001
From: mossroy <mossroy@free.fr>
Date: Fri, 26 Jul 2013 17:39:13 +0200
Subject: [PATCH] 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 | 15 +++++++-------
 js/app.js  | 58 ++++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 1d19dfd6..fd473937 100644
--- a/index.html
+++ b/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
diff --git a/js/app.js b/js/app.js
index 836a806c..bcd320bf 100644
--- a/js/app.js
+++ b/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);
+    }
 
 
     /**