jQuery 自动完成路径 bash 风格

Question

我正在使用 PHP 和 jQuery 开发一个应用程序，其中输入必须采用服务器上的文件路径。该路径并不简单，并且可能有很多条目，因此我想实现一个行为类似于 bash 的自动完成字段，即建议列出当前级别的目录。

假设我有这些目录可用

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

首先，自动完成应建议 a、b 和 c。然后输入 a/后应该会提示 001、002 和 003 ...

我认为服务器应该构建一个所有可用目录的树，将其编写为js对象，然后自动完成功能应该解析输入，对斜杠/进行标记并在相应的节点中找到可用的子目录，当做出选择，将其附加到当前路径。

<小时/>

更新

我快要使用 jQuery Autocomplete w/ multiple values 了，但我不喜欢它的行为方式。我希望搜索操作能够将文本填充到可用内容中的下一个歧义，就像 bash 的自动完成功能一样。

这是我现在拥有的link on pastbin

Answer 1

终于如我想象的那样了。服务器构建一个 json 树，该树由源函数动态解析，并使用 2 个输入字段来填充选项卡补全的建议。

建立一个工作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));
}