LordAro/snippets.html

## snippets.html
<html>
  <head>
    <title>Dropdown test</title>
    <style>
    .textcomplete-dropdown {
      border: 1px solid #ddd;
      background-color: white;
    }

    .textcomplete-dropdown li {
      border-top: 1px solid #ddd;
      padding: 2px 5px;
    }

    .textcomplete-dropdown li:first-child {
      border-top: none;
    }

    .textcomplete-dropdown li:hover,
    .textcomplete-dropdown .active {
      background-color: rgb(110, 183, 219);
    }

    .textcomplete-dropdown {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .textcomplete-dropdown a:hover {
      cursor: pointer;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="jquery-textcomplete-1.6.1/dist/jquery.textcomplete.min.js"></script>
    <script>
    $(function() {
      $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if (document.selection) {
          input.focus(); // IE
        }
        return 'selectionStart' in input ? input.selectionStart :
          '' || Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
      }
      $.fn.setCursorPosition = function(pos) {
        return this.each(function() {
          if ('selectionStart' in this) {
            this.selectionStart = pos;
            this.selectionEnd = pos;
          } else if (this.setSelectionRange) {
            this.setSelectionRange(pos, pos);
          } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            if (pos < 0) {
              pos = $(this).val().length + pos;
            }
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
          }
        });
      };

      // '$' indicates where the cursor should be after inserting.
      var snippets = {
        "Hi": "Hi $,\n\n\nYours,\nCharles",
        "Hi2": "Hello $,\n\n\nYours,\nNotCharles",
        "Fix": "Fix yo server.",
        "Loram": "Loram $Ipsum Delora",
      };
      var relativeMovePos = 0;
      $("#textinput").textcomplete([{
        match: /(^|\s)@(\w*)$/, // '@' triggers dropdown
        search: function (term, callback) {
          // Work out which snippets match current term
          callback($.map(Object.keys(snippets), function (word) {
            return word.indexOf(term) === 0 ? word : null;
          }));
        },
        replace: function (word) {
          insert = snippets[word];
          // If there's a '$', remove it and record its position.
          idx = insert.indexOf('$');
          if (idx >= 0) {
            insert = insert.slice(0, idx) + insert.slice(idx+1, insert.length);
            relativeMovePos = insert.length - idx;
          } else {
            relativeMovePos = 0; // Reset
          }
          return '$1' + insert;
        }
      }]).on({
        'textComplete:select': function(e, value, s) { // Move cursor to recorded value
          $(this).setCursorPosition($(this).getCursorPosition() - relativeMovePos);
        }
      });
    });
    </script>
  </head>
  <body>
    <p>Some text that's above the textarea</p>
    <textarea id="textinput" rows=30 cols=100></textarea>
    <p>Some other text that's below the text area</p>
  </body>
</html>
	<html>
	<head>
	<title>Dropdown test</title>
	<style>
	.textcomplete-dropdown {
	border: 1px solid #ddd;
	background-color: white;
	}

	.textcomplete-dropdown li {
	border-top: 1px solid #ddd;
	padding: 2px 5px;
	}

	.textcomplete-dropdown li:first-child {
	border-top: none;
	}

	.textcomplete-dropdown li:hover,
	.textcomplete-dropdown .active {
	background-color: rgb(110, 183, 219);
	}

	.textcomplete-dropdown {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.textcomplete-dropdown a:hover {
	cursor: pointer;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="jquery-textcomplete-1.6.1/dist/jquery.textcomplete.min.js"></script>
	<script>
	$(function() {
	$.fn.getCursorPosition = function() {
	var input = this.get(0);
	if (!input) return; // No (input) element found
	if (document.selection) {
	input.focus(); // IE
	}
	return 'selectionStart' in input ? input.selectionStart :
	'' \|\| Math.abs(document.selection.createRange().moveStart('character', -input.value.length));
	}
	$.fn.setCursorPosition = function(pos) {
	return this.each(function() {
	if ('selectionStart' in this) {
	this.selectionStart = pos;
	this.selectionEnd = pos;
	} else if (this.setSelectionRange) {
	this.setSelectionRange(pos, pos);
	} else if (this.createTextRange) {
	var range = this.createTextRange();
	range.collapse(true);
	if (pos < 0) {
	pos = $(this).val().length + pos;
	}
	range.moveEnd('character', pos);
	range.moveStart('character', pos);
	range.select();
	}
	});
	};

	// '$' indicates where the cursor should be after inserting.
	var snippets = {
	"Hi": "Hi $,\n\n\nYours,\nCharles",
	"Hi2": "Hello $,\n\n\nYours,\nNotCharles",
	"Fix": "Fix yo server.",
	"Loram": "Loram $Ipsum Delora",
	};
	var relativeMovePos = 0;
	$("#textinput").textcomplete([{
	match: /(^\|\s)@(\w*)$/, // '@' triggers dropdown
	search: function (term, callback) {
	// Work out which snippets match current term
	callback($.map(Object.keys(snippets), function (word) {
	return word.indexOf(term) === 0 ? word : null;
	}));
	},
	replace: function (word) {
	insert = snippets[word];
	// If there's a '$', remove it and record its position.
	idx = insert.indexOf('$');
	if (idx >= 0) {
	insert = insert.slice(0, idx) + insert.slice(idx+1, insert.length);
	relativeMovePos = insert.length - idx;
	} else {
	relativeMovePos = 0; // Reset
	}
	return '$1' + insert;
	}
	}]).on({
	'textComplete:select': function(e, value, s) { // Move cursor to recorded value
	$(this).setCursorPosition($(this).getCursorPosition() - relativeMovePos);
	}
	});
	});
	</script>
	</head>
	<body>
	<p>Some text that's above the textarea</p>
	<textarea id="textinput" rows=30 cols=100></textarea>
	<p>Some other text that's below the text area</p>
	</body>
	</html>