2

我正在使用 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 的自动完成功能一样。

这是我现在在 Pastbin 上的链接

4

2 回答 2

3

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

在 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));
}
于 2013-01-09T20:36:53.937 回答
0

如果您对以下内容感到满意，则此解决方案将适合您。太简单了

  1. 将建议显示为完整路径。即，如果用户键入/a/ ，则显示/a/001、/a/002 和 /a/003的建议，而不是 001、002 和 003

在这种情况下，您可以使用远程数据源创建jQuery 自动完成功能

$("#birds").autocomplete({
    source: "search.php",
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
    }
});

然后，search.php您可以将所需的值生成为 json 数组。

否则，您可以创建一个自定义自动完成，仅显示服务器上的部分路径。

于 2013-01-03T19:27:56.997 回答