jQuery自动完成路径bash风格

我正在开发一个应用程序使用PHP和jQuery，其中输入必须在服务器上的文件路径。路径不是微不足道的，可能会有很多条目，所以我想实现一个自动完成字段，其行为类似于bash，即当前级别的建议列表目录。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

来源

2013-01-03 Vanista

我只注意到，谷歌的SEACH不正是我想要什么...... – Vanista

终于如我所想。服务器构建一个由源函数动态分析的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)); 
}

来源

2013-01-09 20:36:53 Vanista

我把这段代码转换成了一个jquery插件。使用的格式是$（“。path.input”）。pathAutocomplete（paths）。有一个示例运行在http://wholcomb.github.io/path-autocomplete/ – Will

如果您没有问题如下，这种解决方案会为你工作。这太简单了

以完整路径显示建议。即，如果用户键入/一个/ 然后显示/一个/ 001的建议，/ A/002 /一个/ 003代替 001，002和003

在这种情况下和你可以与远程数据源

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

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

来源

2013-01-03 19:27:56 Wolf

谢谢，但我试图避免给的完整路径，因为它可能会混乱。我想要浏览的目录树由三个层次组成，每个层次都可以有很多条目。作为一种替代方法，我正在考虑使用适当目录列表动态加载的每个深度的选择框。 – Vanista

如果您确定了三个级别，那么您可以使用三个jQuery自动完成。加载json和全部将由jQuery管理。所以这对你来说很简单。 – Wolf

jQuery自动完成路径bash风格

回答

相关问题