JQuery автозаполнение с помощью «@»

Я хочу достичь такоговыход (Fiddler Demo) с помощью JQuery UI Autocomplete, хотя.

Единственная проблема с моим примером заключается в том, что в событиях со стрелками есть проблема, не похожая на автозаполнение jquery.

 Peter Wateber08 апр. 2012 г., 09:10
на самом деле вывод jsfiddle - это то, что мне нужно ... но я хочу реализовать его с помощью автозаполнения jquery. плагин, который я использовал, был другим и имел проблемы с клавишами со стрелками и выбором ... так что вы можете сделать это на автозаполнении jquery, имеющем тот же вывод с jsfiddle?
 Peter Wateber08 апр. 2012 г., 09:04
нет, не для этого jsfiddle. Я хочу использовать плагин jquery autocomplete ... у этого есть проблемы, попробуйте использовать клавиши со стрелками, пока не дойдете до конца выпадающего меню, но сначала убедитесь, что текстовая область заполнена.
 Tats_innit08 апр. 2012 г., 09:07
Okies, попробовал клавишу со стрелкой и, кажется, ждет +1 событие; Если вы сможете подробнее рассказать о ваших потребностях во входных и выходных данных с помощью jsfiddle, я мог бы вам помочь. :)
 Tats_innit08 апр. 2012 г., 09:13
ммм ... так ты имеешь в виду: используя этоjsfiddle.net/67dxH а ты хочешь1) выберите из текстовой области и2) текущее значение в текстовом поле вывода? извините, если я задаю слишком много вопросов, я просто хочу убедиться, что я правильно понимаю ваш вопрос :)
 Tats_innit08 апр. 2012 г., 09:02
Привет привет! так что вы хотите такое же поведение, т.е. если в случае значение скрытого тега как = @ [C #] и текстовой области как @ C #, но для этого jsfiddle? ура!

Ответы на вопрос(3)

Решение Вопроса

Я написал виджет, упомянутый в этом вопросе, и исправил проблему:

http://www.hawkee.com/snippet/9391/

 Peter Wateber12 апр. 2012 г., 07:51
парень хоки! Вы здесь!

Рабочая демоверсия здесь:http://jsfiddle.net/cH4p4/ && http://jsfiddle.net/LxpQQ/

Как вы упомянули, используя автозаполнение:

"so my textarea output would be "@c#" and the input tag output would be "@[c#]"

HTML

<textarea id='inputbox' placeholder='When @mentions is called its output is put on the input box as well as updated when textarea is blur and submitted'></textarea>
<br/>
<input id="tags" />
<span id="loading" class="hidden">Loading...</span>
​

Jquery Code

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

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

function getTags(term, callback) {
    $.ajax({
        url: "http://api.stackoverflow.com/1.1/tags",
        data: {
            filter: term,
            pagesize: 5
        },
        type: "POST",
        success: callback,
        jsonp: "jsonp",
        dataType: "jsonp"
    });    
}

$(document).ready(function() {

    $("#inputbox")
    // 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({
        source: function(request, response) {
            if (request.term.indexOf("@") >= 0) {
                $("#loading").show();
                getTags(extractLast(request.term), function(data) {
                    response($.map(data.tags, function(el) {
                        return {
                            value: el.name,
                            count: el.count
                        }
                    }));
                    $("#loading").hide();                    
                });
            }
        },
        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
            $("#tags").val("@["+ui.item.value+"]");
            ui.item.value = "@" + ui.item.value;                
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join("");
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>@[" + item.label + "]&nbsp;<span class='count'>(" + item.count + ")</span></a>")
            .appendTo(ul);
    };
});​

CSS

span.count { 
    font-style: italic; 
    color: #C0C0C0;
}
.hidden { display: none; }

textarea { width: 300px; height: 100px; resize: none; }
​
 Peter Wateber08 апр. 2012 г., 09:29
что-то не так ... вы не можете использовать его несколькими способами, и он добавляет только "@ [упоминание]" & quot; не вся строка ...
 Peter Wateber08 апр. 2012 г., 09:36
Например, вы набираете это в textarea = & quot; @android hello @ c # & quot; и в поле ввода значение должно быть "@ [android] hello @a [c]" ... но вы разместили другое. текстовая область - & quot; android hello @ c # & quot; и поле ввода & quot; @ [c #] & quot; он не обновляется
 08 апр. 2012 г., 09:33
Ммм как ты имеешь ввиду? Если вы будете использовать jsfiddle выше и сказать вход и выход, я внесу изменения? сделать это вpoint number пожалуйста :)
 08 апр. 2012 г., 09:47
Okies дай мне 5 минут, я мог бы сделать это в автозаполнении.
 08 апр. 2012 г., 09:40
Ага, ты тоже этого хочешьif you type @ foobad zoo @C# in texture; The input box should be @ foobad zoo @ [C#] да уж??

Вы можете попробовать следующий плагин jquery, который мы только что открыли в GitHub:https://github.com/tactivos/jquery-sew

Ваш ответ на вопрос