Question

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

说我有这些目录


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

首先，自动完成应该建议a，b和c。然后输入/它应该建议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));
}

Answer 2

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

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

在这种情况下，您可以使用远程数据源

jQuery autocomplete

$("#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数组。

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

jQuery自动完成路径bash样式

2 个答案: