Enable Up/Down Arrow History In Text Field - jQuery Recall.js

One of the most-used features for a user of command line interfaces is their history. It allows users to cycle through all of the previously typed commands using up and down arrows.

When it comes to web development, some developers want to allow users to re-use previously entered or pre-defined values in text fields like input and textarea elements. This jQuery plugin solves this problem by allowing your users to access those values with the up and down keys. Enjoy.

Keyboard Interactions:

• up/down: recall previous matching entries
• ESC: clear input
• Ctrl-x: clear history,
• Ctrl-d: dump to console

How to use it:

1. Import jQuery library and the Recall.js plugin.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.recall.js"></script>

2. Initialize the plugin on the target text field and done.

$(function(){
  $("input, textarea").recall();
});

3. Use the histroy from another text field.

<input id="input1" />
<input id="input2" />

$("#input2").recall({
  link: "#input1",
});

4. Set the initial data (only if no saved history).

$("input").recall({
  initData: "jQuery,Script,Net".split(","),
});

5. Append more data to the history.

var data = "jQuery,Script,Net".split(",");
$("input").recall({
  data: data,
});

6. Enable/disable the tooltip. Default: false.

$("input").recall({
  tooltip: true,
  tooltipText: "Use up/down key to access history",
});

7. Clear all history.

$("input").recall({
  clear: true
});

8. Add more data to the history.

$("#in1").recall({
  add: ["aa", "bb", "cc", "dd", "ee"],
});

9. More configurations.

$("input").recall({

  // case sensitive?
  matchCase: false,

  // match any characters, not just at the beginning of the strings
  matchAny: false,

  // cycle through all history
  matchAll: false,
  
});

---

This awesome jQuery plugin is developed by gnu0000. For more Advanced Usages, please check the demo page or visit the official website.