Permalink
Browse files

Added the code with no dependency to jQuery.

  • Loading branch information...
1 parent 85282cb commit 1535d92f8209921d58d3ae19627aae89abc968f7 Paul Maxan committed Apr 6, 2012
Showing with 573 additions and 280 deletions.
  1. +5 −4 README
  2. +184 −0 jQueryInline/data.js
  3. +94 −0 jQueryInline/index.html
  4. +1 −1 jQueryPlugin/jquery.tabcomplete.js
  5. +89 −0 noJQuery/code.js
  6. +184 −0 noJQuery/data.js
  7. +16 −0 noJQuery/index.html
  8. +0 −275 snippet.html
View
9 README
@@ -2,13 +2,14 @@ Tab completion is: http://en.wikipedia.org/wiki/Command-line_completion
This is a bash-type multi-tab, rotating and case-insensitive completion code snippet, that was written in response to a feature request for the Nodester IRC project: http://irc.nodester.com/. Encouraged by the person that made the feature request, sirkitree (https://github.com/sirkitree) and by alejandromg (https://github.com/alejandromg) from Nodester (https://github.com/nodester), here is the snippet for whomever is interested.
-It was tested on a Windows XP machine over IE8 version 8.0.6001.18702, FF 11.0 and Chrome 18.0.1025.142 m.
+It was tested with IE8 version 8.0.6001.18702, FF 11.0 and Chrome 18.0.1025.142 m on a WindowsXP machine.
-The code uses space as separator. The completion source is represented by any string array: ["Abraham Lincoln", "abacus Moire", "22", "brocard 1", "ab!ba", "crocard", "cribauld", "cronos"].
-
-The file "snippet.html" contains code that you can just copy/paste into your own project. Currently it still depends on jQuery but the idea is, if possible, to make it independent and pure js.
+The completion source is represented by any string array, e.g., ["Abraham Lincoln", "abacus Moire", "22", "brocard 1", "ab!ba", "crocard", "cribauld", "cronos"]. In our examples, the "nicks" array is either inline or external to the respective html file.
+The folder jQueryInline contains code that you can just copy/paste into your own project. This code depends on jQuery.
The jQueryPlugin is, according to sirkitree, its author: "a standalone .js file that could easily be plugged into other people's projects".
+The folder noJQuery, as the name implies, contains code that has no dependency to jQuery.
+
Usage:
We want our message to be: "alejandromg, microp11 says hi"
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="ISO-8859-1">
+ <title>tabcomplete</title>
+ <script src="data.js" type="text/javascript"></script>
+ <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
+</head>
+<body>
+
+<div>
+ <form>
+ <input id="text_input" type="text" placeholder="type a message" size="80">
+ </form>
+</div>
+
+<script type="text/javascript">
+
+$(document).ready(function () {
+
+ //variables used in tab completion
+ var prevKeyWasTab = false,
+ pattern = "", //text fragment respective pattern to look for
+ candidate = "", //candidate
+ source = [], //array of values to be matched
+ sourcePos = 0, //the search starting position
+ //variables used in multi tab completion
+ patternPos = -1,
+ prePattern = "";
+
+ //start snippet
+ $('#text_input').keydown(function (event) {
+ if (source.length == 0) {
+ source = nicks; //initialization in case we press Tab with no prior input
+ }
+ if (event.keyCode == 9) {
+ event.preventDefault();
+ if (prevKeyWasTab == false) {
+ prevKeyWasTab = true;
+ pattern = $('#text_input').val();
+ patternPos = pattern.lastIndexOf(" ");
+ if (patternPos != -1 ) {
+ prePattern = pattern.substr(0, patternPos+1);
+ pattern = pattern.substr(patternPos+1);
+ };
+ pattern = new RegExp("^"+pattern, "i");
+ sourcePos = 0;
+ candidate = incrementalSearch(pattern, source, sourcePos);
+ if (candidate.length > 0) {
+ //candidate found
+ $('#text_input').val(prePattern+candidate);
+ return;
+ }
+ } else {
+ candidate = incrementalSearch(pattern, source, sourcePos);
+ if (candidate.length > 0) {
+ //candidate found
+ $('#text_input').val(prePattern+candidate);
+ return;
+ }
+ }
+ } else {
+ prevKeyWasTab = false;
+ prePattern = "";
+ source = nicks; //we do not want the source to change during tabcompletion
+ }
+ });
+
+ var incrementalSearch = function (pattern, source, sp) {
+ var result = "",
+ r = 0;
+ for (var i = sp; i < source.length; i++) {
+ r = source[i].search(pattern);
+ sourcePos = (i+1 > source.length-1) ? 0 : i+1;
+ if (r == 0) {
+ return source[i];
+ }
+ }
+ for (var i = 0; i < sp; i++) {
+ r = source[i].search(pattern);
+ sourcePos = i+1;
+ if (r == 0) {
+ return source[i];
+ }
+ }
+ return result;
+ };
+ //end snippet
+});
+
+</script>
+
+</body>
+</html>
@@ -10,7 +10,7 @@
candidate = "", // Candidate
source = [], // Array of values to be matched
sourcePos = 0, // The search starting position
- // Varibles used in multi tab completion
+ // Variables used in multi tab completion
patternPos = -1,
prePattern = "",
el = $(this); // Element
View
@@ -0,0 +1,89 @@
+/*
+ * set input field and attach event handler
+ */
+var init = function (document) {
+ input = document.getElementById("text_input");
+ input.focus();
+ input.onkeydown = onKeyDownHandler;
+};
+
+/*
+ * tab completion starts here ------------------------------------------------
+ */
+
+//variables used in tab completion
+var prevKeyWasTab = false,
+ pattern = "", //text fragment respective pattern to look for
+ candidate = "", //candidate
+ source = [], //array of values to be matched
+ sourcePos = 0, //the search starting position
+ //variables used in multi tab completion
+ patternPos = -1,
+ prePattern = "";
+
+//the onkeydown event handler
+var onKeyDownHandler = function (event) {
+ if (source.length == 0) {
+ source = nicks; //initialization in case we press Tab with no prior input
+ }
+ //Note: you may need to further play with the line below to enable support for additional UAs
+ event = event || window.event; //+ support for IE8
+ if (event.keyCode == 9) {
+ //Note: you may need to further play with the line below to enable support for additional UAs
+ event.preventDefault ? event.preventDefault() : event.returnValue = false; // + support for IE8
+ if (prevKeyWasTab == false) {
+ prevKeyWasTab = true;
+ pattern = input.value;
+ patternPos = pattern.lastIndexOf(" ");
+ if (patternPos != -1 ) {
+ prePattern = pattern.substr(0, patternPos + 1);
+ pattern = pattern.substr(patternPos + 1);
+ };
+ pattern = new RegExp("^" + pattern, "i");
+ sourcePos = 0;
+ candidate = incrementalSearch(pattern, source, sourcePos);
+ if (candidate.length > 0) {
+ //candidate found
+ input.value = prePattern + candidate;
+ return;
+ }
+ } else {
+ candidate = incrementalSearch(pattern, source, sourcePos);
+ if (candidate.length > 0) {
+ //candidate found
+ input.value = prePattern + candidate;
+ return;
+ }
+ }
+ } else {
+ prevKeyWasTab = false;
+ prePattern = "";
+ source = nicks; //we do not want the source to change during tabcompletion
+ }
+}
+
+//helper function
+var incrementalSearch = function (pattern, source, sp) {
+ var result = "",
+ r = 0,
+ i = 0;
+ for (i = sp; i < source.length; i++) {
+ r = source[i].search(pattern);
+ sourcePos = (i + 1 > source.length - 1) ? 0 : i + 1;
+ if (r == 0) {
+ return source[i];
+ }
+ }
+ for (i = 0; i < sp; i++) {
+ r = source[i].search(pattern);
+ sourcePos = i + 1;
+ if (r == 0) {
+ return source[i];
+ }
+ }
+ return result;
+}
+
+/*
+ * tab completion ends here ------------------------------------------------
+ */
Oops, something went wrong.

0 comments on commit 1535d92

Please sign in to comment.