jQuery автозаполнение путь Баш стиль

Я разрабатываю приложение с использованием PHP и jQuery, в котором входные данные должны принимать путь к файлу на сервере. Путь не тривиален, и там может быть много записей, поэтому я хотел бы реализовать поле автозаполнения, которое ведет себя как bash, т. е. каталоги списка предложений для текущего уровня.

Допустим, у меня есть эти каталоги 


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

Для начала автозавершение должно предполагать a, b и c. Затем после ввода a/ он должен предложить 001, 002 и 003 ...

Я думаю, что сервер должен построить дерево всех доступных каталогов, записать его как объект js, затем функция автозаполнения должна проанализировать входные данные, маркировать на слешах / и найти доступные подкаталоги в соответствующем узле, и когда выбор сделан, добавить его к текущему пути.

Обновить

Я почти там, используяавтозаполнение jQuery с несколькими значениями , но мне не нравится, как он себя ведет. Я желаю поисков действие заполнит текст до следующей неясности из того, что доступно, точно так же, как это делает автозаполнение bash.

Вот что у меня есть прямо сейчас ссылка на pastbin

2 2
path jquery bash autocomplete

2 ответа:

Наконец-то получил его, как я и предполагал. Сервер строит дерево 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));
}
2

Если вы согласны со следующим, это решение будет работать для вас. Это слишком просто

  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.

В противном случае вы можете создать пользовательское автоматическое завершение, которое показывает только частичные пути на сервере.

0