автозаполнение слов в середине (jQuery UI)

Question

Кто-нибудь знает хороший пример кода, используя виджет автозаполнения jQuery UI, который может автозаполнять слова в середине текстового поля, а не только автозаполнять слово только в конце?

Я использую виджет автозаполнения jquery UI для компонента, который поддерживает запись нескольких тегов. Это похоже на редактор тегов переполнения стека, но проще: нет никакого причудливого форматирования в раскрывающемся списке автозаполнения, никаких фоновых изображений «тегов» в окне редактирования. Я начал с jQuery UI Autocomplete Multiple sample и модифицировал его.

Работает нормально, за исключением того, что автозаполнение не работает для тегов в середине строки с несколькими тегами. Например, если я напечатаю C Fortran, а затем положил каретку сразу после C и напечатал +, я бы ожидал увидеть C++ в списке автозаполнения, но вместо этого я снова вижу Fortran.

Вот код до сих пор: http://jsfiddle.net/WCfyB/4/

Это та же самая проблема описывается autocomplete in middle of text (like Google Plus), но проблема в этом вопросе было проще, потому что он может рассчитывать на пустой @ в тексте, сигнализировать, чтобы показать автозаполнения , В моем случае я не могу просто полагаться на текст - мне действительно нужно выяснить, где находится каретка и автозаполнять слово, где находится карет.

Я мог бы создать это самостоятельно с помощью каретки или другого плагина, но задавался вопросом, был ли уже установлен JQuery-UI-образец, который я мог бы использовать, не изобретая другое колесо, особенно если есть конкретные случаи, зависящие от браузера беспокоиться о. В идеале он будет вести себя следующим образом: всякий раз, когда пользователь помещает каретку внутрь или в конец тега (где теги всегда разделены 1 + пробелами), для этого тега отображается автозаполнение. Знать хороший образец?

Answer 1

Я не знаю ни одного примера, как это, но вот что-то, что вы могли бы начать с:

var availableTags = [ ... ]; 

function split(val) { 
    return val.split(/ \s*/); 
} 

function extractLast(term) { 
    return split(term).pop(); 
} 

$("#tags") 
    .bind("keydown", function(event) { 
     // don't navigate away from the field on tab when selecting an item 
     if (event.keyCode === $.ui.keyCode.TAB 
            && $(this).data("autocomplete").menu.active) { 
      event.preventDefault(); 
     } 
    }) 
    .autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      var results = [], 
       selectionStart = this.element[0].selectionStart 
       term = extractLast(request.term.substring(0, selectionStart)); 

      if (term.length > 0) { 
       results = $.ui.autocomplete.filter(availableTags, term); 
      } 
      response(results); 
     }, 
     focus: function() { 
      return false; // prevent value inserted on focus 
     }, 
     select: function(event, ui) { 
      var terms = split(this.value.substring(0, this.selectionStart)); 
      terms.pop(); // remove the current input 
      terms.push(ui.item.value);  // add the selected item 
      this.value = 
       $.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " "; 
      return false; 
     } 
    }); 

Пример:http://jsfiddle.net/WCfyB/7/

Основной нюанс здесь в том, что метод selectionStart делает не работает в IE. Вы можете заменить эти вызовы функций одним из тех плагинов, которые вы упомянули в своем вопросе.