автозаполнение слов в середине (пользовательский интерфейс jQuery) - PullRequest
Новая
       14

автозаполнение слов в середине (пользовательский интерфейс jQuery)

3 голосов
/ 06 января 2012

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

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

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

Вот код на данный момент: http://jsfiddle.net/WCfyB/4/

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

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

1 Ответ

3 голосов
/ 06 января 2012

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

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/

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