jQuery плагин автозаполнения, который запускается после токена - PullRequest
5 голосов
/ 30 декабря 2010

Я создаю приложение и хотел бы выполнить автозаполнение в текстовой области, очень похоже на то, как Twitter / Facebook выполняет свои действия с @ [name]. Тем не менее, я хотел бы, чтобы он срабатывал при вводе [TID: x], где x - целое число любой длины.

Похоже, что Twitter / Facebook запускают автозаполнение после того, как вы нажмете знак @, а затем отправляет текстовые данные после него для автозаполнения. У кого-нибудь есть идеи, может ли плагин пользовательского интерфейса jQuery (или любой другой плагин) сделать что-то подобное?

Ответы [ 2 ]

5 голосов
/ 28 октября 2011

Я создал плагин для этого, который использует автозаполнение jQuery-UI и пример Эндрю (спасибо за это).

URL: https://github.com/experteer/autocompleteTrigger

Демо: http://jsfiddle.net/dmattes/2YRgW/1/

$('input,textarea').autocompleteTrigger({
  triggerStart : '@',
  triggerEnd: '',
  source: [
    "Asp",
    "BASIC",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ]
});

Лучший, Daniel

4 голосов
/ 31 декабря 2010

Это действительно возможно.Вы можете нажать на события автозаполнения виджета (search и select), чтобы выполнить это:

var triggered = false;
var trigger = "TDI:";

$("input").autocomplete({
    source: [...],
    search: function() {
        if (!triggered) {
            return false;
        }
    },
    select: function(event, ui) {
        var text = this.value;
        var pos = text.lastIndexOf(trigger);

        this.value = text.substring(0, pos + trigger.length) +
            ui.item.value;

        triggered = false;

        return false;
    },
    focus: function() { return false; },
    minLength: 0
}).bind("keyup", function() {
    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;

    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search", query);
    }
    else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});

Демо здесь: http://jsfiddle.net/andrewwhitaker/kCkga/

Примечания:

  • Это очень ограниченная демоверсия.Это не будет работать, если вы попытаетесь сделать автозаполнение в середине строки.
  • Чтобы завершить этот пример, вам нужно будет поработать, выяснить положение курсора в поле ввода ивставив туда текст вместо
  • Возможно, другие ошибки, но я определенно думаю, что это выполнимо.Надеюсь, это поможет вам.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...