Question

I’m developing an application using PHP and jQuery in which an input must take a file path on the server. The path is not trivial and there may be a lot of entries so I’d like to implement an auto complete field that behaves like bash, i.e. the suggestions list directories for the current level.

Say I have these directories available

    /a/001
    /a/002
    /a/003
    /b/020
    /b/021
    /c/002

To begin with, the auto complete should suggest a, b and c.
Then after entering a/ it should suggest 001, 002 and 003 …

I think the server should build a tree of all available directories, write it as a js object, then the auto complete function should parse the input, tokenize on slashes / and locate the available sub directories in the corresponding node, and when a selection is made, append it to the current path.

---

Update

I’m almost there using the jQuery Autocomplete w/ multiple values, but I don’t like how it behaves. I wish the search action would fill in the text up to the next abiguity from what is available, just like bash’s autocomplete does.

Here is what I have right now link on pastbin

Answer 1

Finally got it as I imagined. The server builds a json tree which is dynamically parsed by the source function and using 2 input fields to populate a suggestion for the tab completion.

Put up a working example on jsfiddle

function acSource(request, response) {
  var path = split(request.term);
  var depth = path.length;
  var node = paths;
  var avail = new Array();

  // descent into the path tree to get a list of suggestions
  for (var n = 1; n < depth && typeof node !== "undefined"; n++) {
    var cur = path[n - 1];
    node = node[cur];
  }

  // build a regex with the last directory entry being typed
  var last = path.pop();
  var re = new RegExp("^" + last + ".*", "i");

  // filter suggestions by matching with the regex
  for (var k in node) {
    if (k.match(re)) avail.push(k);
  }

  // build a new suggestion
  path.push(sharedStart(avail));
  if (avail.length == 1) path.push("");

  // set suggestion for autocomplete
  var sugg = $(this.element).siblings(".pathSuggest");
  $(sugg).val(path.join("/"));

  // delegate back to autocomplete, but extract the last term
  response($.ui.autocomplete.filter(avail, last));
}