Автозаполнение Ajax (или автозаполнение) с завершением / автозаполнением TAB аналогично завершению командной строки оболочки? - PullRequest
Новая
       32

Автозаполнение Ajax (или автозаполнение) с завершением / автозаполнением TAB аналогично завершению командной строки оболочки?

8 голосов
/ 03 декабря 2009

Я реализую функцию автозаполнения / автозаполнения AJAX, и я не только хочу делать обычные предложения показа, которые похожи на то, что печатал пользователь, но я хотел бы позволить пользователю делать частичные дополнения для сохранения ввода ,

Итак, представьте, что в моем словаре есть следующие значения: "зеленое яблоко", "зеленая груша", "зеленый фрукт", "голубое небо", "голубая вода", "синий след".

Если пользователь вводит "g", предложения должны быть "зеленое яблоко", "зеленая груша", "зеленый фрукт", и я хотел бы позволить пользователю нажать TAB или что-то, чтобы обновить свой запрос до " зелёный ", тогда они могли бы набрать" а "и получить" зелёное яблоко ".

Я пытаюсь смоделировать это после завершения командной строки оболочки linux.

Можете ли вы порекомендовать элемент управления / скрипт, который это делает? Или модификация / настройка существующего элемента управления?

Ответы [ 3 ]

20 голосов
/ 13 декабря 2009

Этот конкретный тип автозаполнения не поддерживается в популярных плагинах автозаполнения (для jQuery, Scripty ...), поскольку обычно они предоставляют раскрывающийся пользовательский интерфейс для выбора требуемого соответствия.

Итак, давайте предположим, что у нас нет готового решения. Бу-хо. Насколько сложно это кодировать? 

// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
  if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
    var candidates = []
    // filter data to find only strings that start with existing value
    for (var i=0; i < data.length; i++) {
      if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
        candidates.push(data[i])
    }

    if (candidates.length > 0) {
      // some candidates for autocompletion are found
      if (candidates.length == 1) input.value = candidates[0]
      else input.value = longestInCommon(candidates, input.value.length)
      return true
    }
  }
  return false
}

// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
  var i, ch, memo
  do {
    memo = null
    for (i=0; i < candidates.length; i++) {
      ch = candidates[i].charAt(index)
      if (!ch) break
      if (!memo) memo = ch
      else if (ch != memo) break
    }
  } while (i == candidates.length && ++index)

  return candidates[0].slice(0, index)
}

Тестовая страница здесь - она ​​должна работать в обычных браузерах. Для поддержки IE используйте прослушивание событий из prototype.js, jQuery или др.

3 голосов
/ 09 декабря 2009

Если вы используете jQuery, отличный плагин будет http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. Просто используйте css, чтобы скрыть раскрывающийся список, и оставьте функцию автоматического заполнения вкладок включенной.

Я думаю, было бы просто сделать плагин jquery для себя ...

Вдоль линий Послушайте клавишу Tab Когда клавиша табуляции нажата, активируйте табуляцию: нажмите на input.autotab 

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });

Свяжите вкладку input.autotab: нажмите событие (в каждом цикле ... если focus == true и т. Д.) Либо для поиска в массиве javascript, либо для запроса xhr (ajax), затем установите значение этого входа как возвращенные данные. 

  $('input.autotab').bind('tab:press', function(){
      if (this.hasFocus){
         this.disabled = true;
         $.get('/autotab', { q: $(this).val() }, function(response){
               $(this).val(response);
               this.disabled = false;
         }, function(){ this.disabled = false; });
      }
  });

В вашем скрипте autosuggest запишите его так, чтобы значение совпадало более чем один раз в базе данных (используйте цикл for с индексом, останавливаясь на элементе index, где сопоставляется первый элемент), и возвращайте значение до этот момент.

1 голос
/ 13 декабря 2009

Самый простой способ - использовать плагин jQuery и автозаполнение. Глядя на HTML-файл stackoverflow, кажется, что они используют один и тот же материал. Кажется, работает очень хорошо для большинства браузеров. Плагин также содержит обширную демонстрацию, которая поможет вам понять, как реализовать его в соответствии с вашими потребностями.

Вот краткий пример с домашней страницы плагина: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);
  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

Больше можно найти здесь http://docs.jquery.com/Plugins/Autocomplete

...