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風格

回答

相關問題