Я использую jquery UI AutoComplete, чтобы пользователи могли пометить друзей, используя @mentions. По умолчанию предложения автозаполнения появляются, когда вы ставите фокус на текстовое поле. Как вы можете создавать предложения только при вводе "@"? Это код, который у меня есть до сих пор:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
];
$("#tags").autocomplete({
source: availableTags,
minLength: 0
});
Вы можете сделать это, предоставив функцию опции source автозаполнения:
var availableTags = [ /* Snip */];
function split(val) {
return val.split(/@\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
/* If the user typed an "@": */
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
/* If they've typed anything after the "@": */
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags, term);
/* Otherwise, tell them to start typing! */
} else {
results = ['Start typing...'];
}
}
/* Call the callback with the results: */
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
Вот рабочий пример: http://jsfiddle.net/BfAtM/2/
Обратите внимание, что это почти идентично этой демонстрации, за исключением требования для пользователя набрать "@". Этот код находится внутри аргумента опции source.
Надеюсь, что это поможет.
Начиная с даты этой заметки, я рекомендую плагин jquery.mentionsInput. Он поддерживает теги @mention, как и на facebook, в комплекте с аватарами и локальными или ajax-данными.
Чтобы ускорить ответ Эндрю Уиттэкера, параметр source jQuery UI Autocomplete используется для указания массива, содержащего элементы, которые должны отображаться в раскрывающемся списке после запуска виджета. Его можно определить как такой массив, функцию, которая возвращает такой массив, или URL-адрес ресурса, который создает такой массив.
Если массив, который в конечном итоге становится значением source, пуст, виджет не отображает раскрывающийся список. Таким образом, определение source как функции, способной возвращать непустой массив только при вводе @, приведет к тому, что виджет будет вести себя по вашему желанию.
Виджет, однако, функционирует как часть компонента тега (здесь упоминается как упоминание) утилита управления, которая имеет 3 компонента:
Модуль автозаполнения: компонент, ответственный за сбор и отображение набора элементов, которые могут использоваться для создания упоминания, с учетом строки.
Модуль отслеживания упоминания: компонент, отвечающий за отслеживание связанных с упоминанием данных; на минимальном расстоянии местоположение, а также поверхностные и существенные (если есть) значения каждого упоминания должны отслеживаться во всех модификациях текста входного элемента, к которому прикреплена утилита.
Упоминающий модуль визуального дифференцирования: компонент, ответственный за дифференциацию текста упоминания от остальной части текста во входном элементе, к которому прикреплена утилита
Дальнейшее продвижение к реализации оставшихся 2 модулей на простом английском языке было бы утомительным; его гораздо лучше посмотреть на код! К счастью, я сделал решение Mentionator, которое является надежным (более того, чем все другие предлагаемые здесь решения), хорошо структурированные, легко следовать, и обильно прокомментировал. Поэтому стоит посмотреть, хотите ли вы просто готовое решение или справочный материал, чтобы создать свой собственный.