nitdoc: Add quick search results preview.
[nit.git] / share / nitdoc / scripts / js-facilities.js
index 669ad08..d67ef9c 100644 (file)
@@ -5,6 +5,16 @@ $.expr[':'].icontains = function(obj, index, meta, stack){
        return (obj.textContent.replace(/\[[0-9]+\]/g, "") || obj.innerText.replace(/\[[0-9]+\]/g, "") || jQuery(obj).text().replace(/\[[0-9]+\]/g, "") || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;\r
 };\r
 \r
+/*\r
+ *     Quick Search global vars\r
+ */\r
\r
+// Current search results preview table\r
+var currentTable = null;\r
+\r
+//Hightlighted index in search result preview table\r
+var currentIndex = -1;\r
+\r
 \r
 /*\r
 * Add folding and filtering facilities to class description page.\r
@@ -37,48 +47,166 @@ $(document).ready(function() {
                        $(this).nextAll().toggle();\r
        })
        
-       // Instert search field
-        $("nav.main ul")
-        .append(
-                       $(document.createElement("li"))
-                       .append(
-                               $(document.createElement("form"))
-                               .append(
-                                       $(document.createElement("input"))\r
-                                       .attr({
-                                               id: "search",\r
-                                               type:   "text",\r
-                                               value: "quick search..."\r
-                                       })\r
-                                       .addClass("notUsed")\r
-                                       .keyup(function() {\r
-                                               $(this).parent().parent().find("ul li:not(:icontains('" + $(this).val() + "'))").addClass("hide");\r
-                                               $(this).parent().parent().find("ul li:icontains('" + $(this).val() + "')").removeClass("hide");\r
-                                       })\r
-                                       .focusout(function() {\r
-                                               if($(this).val() == "") {\r
-                                                       $(this).addClass("notUsed");\r
-                                                       $(this).val("quick search...");\r
-                                               }\r
-                                       })\r
-                                       .focusin(function() {\r
-                                               if($(this).val() == "quick search...") {\r
-                                                       $(this).removeClass("notUsed");\r
-                                                       $(this).val("");\r
-                                               }\r
-                                       })
-                               )
-                               .submit( function() {
-                                       if($("#search").val().length == 0)
-                                               return false
-                                       
-                                       window.location = "full-index.html#q=" + $("#search").val();
-                                       if(window.location.href.indexOf("full-index.html") > -1) {
-                                               location.reload();
-                                       }                               
-                                       return false;
-                               })
-                       )
+       // Insert search field\r
+       $("nav.main ul")\r
+       .append(\r
+               $(document.createElement("li"))\r
+               .append(\r
+                       $(document.createElement("form"))\r
+                       .append(\r
+                               $(document.createElement("input"))\r
+                               .attr({\r
+                                       id: "search",\r
+                                       type:   "text",\r
+                                       autocomplete: "off",\r
+                                       value: "quick search..."\r
+                               })\r
+                               .addClass("notUsed")\r
+\r
+                               // Key management\r
+                               .keyup(function(e) {\r
+                                       switch(e.keyCode) {\r
+\r
+                                               // Select previous result on "Up"\r
+                                               case 38:\r
+                                                       // If already on first result, focus search input\r
+                                                       if(currentIndex == 0) {\r
+                                                               $("#search").val($(currentTable.find("tr")[currentIndex]).data("searchDetails").name);\r
+                                                               $("#search").focus();\r
+                                                       // Else select previous result\r
+                                                       } else if(currentIndex > 0) {\r
+                                                               $(currentTable.find("tr")[currentIndex]).removeClass("activeSearchResult");\r
+                                                               currentIndex--;\r
+                                                               $(currentTable.find("tr")[currentIndex]).addClass("activeSearchResult");\r
+                                                               $("#search").val($(currentTable.find("tr")[currentIndex]).data("searchDetails").name);\r
+                                                               $("#search").focus();\r
+                                                       }\r
+                                               break;\r
+\r
+                                               // Select next result on "Down"\r
+                                               case 40:\r
+                                                       if(currentIndex < currentTable.find("tr").length - 1) {\r
+                                                               $(currentTable.find("tr")[currentIndex]).removeClass("activeSearchResult");\r
+                                                               currentIndex++;\r
+                                                               $(currentTable.find("tr")[currentIndex]).addClass("activeSearchResult");\r
+                                                               $("#search").val($(currentTable.find("tr")[currentIndex]).data("searchDetails").name);\r
+                                                               $("#search").focus();\r
+                                                       }\r
+                                               break;\r
+                                               // Go to url on "Enter"\r
+                                               case 13:\r
+                                                       if(currentIndex > -1) {\r
+                                                               window.location = $(currentTable.find("tr")[currentIndex]).data("searchDetails").url;\r
+                                                               return false;\r
+                                                       }\r
+                                                       if($("#search").val().length == 0)\r
+                                                               return false\r
+                               \r
+                                                       window.location = "full-index.html#q=" + $("#search").val();\r
+                                                       if(window.location.href.indexOf("full-index.html") > -1) {\r
+                                                               location.reload();\r
+                                                       }                               \r
+                                                       return false;\r
+                                               break;\r
+\r
+                                               // Hide results preview on "Escape"\r
+                                               case 27:\r
+                                                       $(this).blur();\r
+                                                       if(currentTable != null) {\r
+                                                               currentTable.remove();\r
+                                                               currentTable = null;\r
+                                                       }\r
+                                               break;\r
+\r
+                                               default:\r
+                                                       if($("#search").val().length == 0) {\r
+                                                               return false;\r
+                                                       }\r
+                                               \r
+                                                       // Remove previous table\r
+                                                       if(currentTable != null) {\r
+                                                               currentTable.remove();\r
+                                                       }\r
+\r
+                                                       // Build results table\r
+                                                       currentIndex = -1;\r
+                                                       currentTable = $(document.createElement("table"));\r
+\r
+                                                       // Escape regexp related characters in query\r
+                                                       var query = $("#search").val();\r
+                                                       query = query.replace(/\[/gi, "\\[");\r
+                                                       query = query.replace(/\|/gi, "\\|");\r
+                                                       query = query.replace(/\*/gi, "\\*");\r
+                                                       query = query.replace(/\+/gi, "\\+");\r
+                                                       query = query.replace(/\\/gi, "\\\\");\r
+                                                       query = query.replace(/\?/gi, "\\?");\r
+                                                       query = query.replace(/\(/gi, "\\(");\r
+                                                       query = query.replace(/\)/gi, "\\)");\r
+\r
+                                                       var index = 0;\r
+                                                       var regexp = new RegExp("^" + query, "i");\r
+                                                       for(var entry in entries) {\r
+                                                               if(index > 10) {\r
+                                                                       break;\r
+                                                               }\r
+                                                               var result = entry.match(regexp);\r
+                                                               if(result != null && result.toString().toUpperCase() == $("#search").val().toUpperCase()) {\r
+                                                                       for(var i = 0; i < entries[entry].length; i++) {\r
+                                                                               if(index > 10) {\r
+                                                                                       break;\r
+                                                                               }\r
+                                                                               currentTable.append(\r
+                                                                                       $(document.createElement("tr"))\r
+                                                                                       .data("searchDetails", {name: entry, url: entries[entry][i]["url"]})\r
+                                                                                       .data("index", index)\r
+                                                                                       .append($(document.createElement("td")).html(entry))\r
+                                                                                       .append(\r
+                                                                                               $(document.createElement("td"))\r
+                                                                                                       .addClass("entryInfo")\r
+                                                                                                       .html(entries[entry][i]["txt"] + "&nbsp;&raquo;"))\r
+                                                                                       .mouseover( function() {\r
+                                                                                               $(currentTable.find("tr")[currentIndex]).removeClass("activeSearchResult");\r
+                                                                                               $(this).addClass("activeSearchResult");\r
+                                                                                               currentIndex = $(this).data("index");\r
+                                                                                       })\r
+                                                                                       .mouseout( function() {\r
+                                                                                               $(this).removeClass("activeSearchResult");\r
+                                                                                        })\r
+                                                                                       .click( function() {\r
+                                                                                               window.location = $(this).data("searchDetails")["url"];\r
+                                                                                       })\r
+                                                                               );\r
+                                                                               index++;\r
+                                                                       }\r
+                                                               }\r
+                                                       }\r
+                                                       \r
+                                                       // Initialize table properties\r
+                                                       currentTable.attr("id", "searchTable");\r
+                                                       currentTable.css("position", "absolute");\r
+                                                       currentTable.width($("#search").outerWidth());\r
+                                                       $("header").append(currentTable);\r
+                                                       currentTable.offset({left: $("#search").offset().left + ($("#search").outerWidth() - currentTable.outerWidth()), top: $("#search").offset().top + $("#search").outerHeight()});\r
+                                               break;\r
+                                       }\r
+                               })\r
+                               .focusout(function() {\r
+                                       if($(this).val() == "") {\r
+                                               $(this).addClass("notUsed");\r
+                                               $(this).val("quick search...");\r
+                                       }\r
+                               })\r
+                               .focusin(function() {\r
+                                       if($(this).val() == "quick search...") {\r
+                                               $(this).removeClass("notUsed");\r
+                                               $(this).val("");\r
+                                       }\r
+                               })\r
+                       )\r
+                       .submit( function() {\r
+                               return false;\r
+                       })\r
+               )\r
         );\r
        \r
        /*\r