Implementacja autouzupełniania jquery UI w celu wyświetlania sugestii podczas wpisywania "@"

Używam jQuery UI AutoComplete, aby umożliwić użytkownikom oznaczanie znajomych za pomocą @wzmianek. Domyślnie sugestie autouzupełniania pojawiają się, gdy tylko ustawisz fokus na polu tekstowym. Jak sprawić, by sugestie pojawiały się dopiero po wpisaniu"@"? To jest kod jaki mam do tej pory: 

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            ];
$("#tags").autocomplete({
    source: availableTags,
    minLength: 0
});
Author: Prabhu, 2011-05-12
Source

3 answers

Możesz to zrobić, podając funkcję do opcji autouzupełniania 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;
    }
});

Oto działający przykład: http://jsfiddle.net/BfAtM/2/

Zauważ, że jest to prawie identyczne z to demo, z wyjątkiem wymogu, aby użytkownik wpisał "@". Kod ten znajduje się wewnątrz argumentu opcji source.

Mam nadzieję, że to pomoże.
 20
Author: Andrew Whitaker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-12 03:59:55

Od Daty tej notki polecam jquery.mentionsInput plugin. Obsługuje tagowanie @ mention tak jak na facebook, wraz z awatarami i danymi lokalnymi lub ajax.

Http://podio.github.com/jquery-mentions-input/

 4
Author: stereoscott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-16 19:32:18

Aby nieco rozszerzyć odpowiedź Andrew Whittakera, opcja source jQuery UI Autocomplete służy do określenia tablicy zawierającej elementy, które mają być wyświetlane na rozwijanej liście po uruchomieniu widżetu. Może być zdefiniowana jako taka tablica, funkcja zwracająca taką tablicę lub adres URL do zasobu, który wytwarza taką tablicę.

Jeśli tablica, która ostatecznie staje się wartością source jest pusta, widżet nie wyświetli listy rozwijanej. Zdefiniowanie source jako funkcja zdolna do zwrócenia niepustej tablicy tylko wtedy, gdy @ zostanie wprowadzony sprawi, że widżet zachowa się tak, jak chcesz.

Widżet działa jednak tylko jako część składowa znacznika (w niniejszym dokumencie określana jako mention ) narzędzie do zarządzania, które ma 3 Składniki:

  1. Moduł Autocomplete : komponent odpowiedzialny za pobranie i wyświetlenie zestawu elementów, które mogą być użyte do utworzenia wzmianki, biorąc pod uwagę sznurek.

  2. Moduł Śledzenia wzmianek : komponent odpowiedzialny za śledzenie danych związanych z wzmianką; co najmniej lokalizacja, a także powierzchowne i merytoryczne (jeśli istnieją) wartości każdej wzmianki powinny być śledzone we wszystkich modyfikacjach tekstu elementu wejściowego, do którego narzędzie jest przymocowane.

  3. Mention Visual differentiation module: komponent odpowiedzialny za różnicowanie tekstu mention z reszta tekstu w elemencie wejściowym, do którego jest przymocowane narzędzie

Dalsze zagłębianie się w implementację pozostałych 2 modułów, w prostym języku angielskim, byłoby żmudne; o wiele lepiej spojrzeć na kod! Na szczęście stworzyłem rozwiązanie, Mentionator , które jest solidne (bardziej niż wszystkie inne proponowane tutaj rozwiązania), dobrze zorganizowane, łatwe do naśladowania i dobrze skomentowane. Warto więc przyjrzeć się, czy po prostu chcesz gotowe rozwiązanie, czy materiał referencyjny do tworzenia własnych.

 1
Author: Kevin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-03 11:36:58