jQuery для отражения пользовательского ввода в виде типа, в отдельном div

Question

У меня есть текстовое поле с именем names, которое позволяет пользователю вводить отдельные слова, каждое слово разделяется пробелом.

Затем у меня есть div с именем preview, который изначально ничего не содержит, нос каждым символом, который появляется в текстовом поле names, я хотел бы показать это в предварительном просмотре, где каждое отдельное слово (на основе разделения «пробел») выводится в виде отдельных тегов span (поэтому я могу применитьстиль для каждого отдельного «имени» в предварительном просмотре.

Я также должен отметить, что в некоторых сценариях значения будут поступать в текстовое поле names через список автозаполнения пользовательского интерфейса jQuery (с которым я уже работал), а также предварительно заполнены (например, когда я редактирую запись и заполняю текстовое поле ранее выбранными именами).

Мой jQuery не очень хорош, и я искал решение, но не добился большого успеха.

Как бы мне этого добиться?

Answer 1

Я бы просто взял весь текст из текстового поля names и заполнял его в элементе предварительного просмотра при каждом нажатии клавиши, если производительность не станет проблемой.

$('#names').bind('keyup', function(){
    var text = $(this).val();
    var tokens = text.split(" ");
    var output = "";
    for(int i=0; i<tokens.length; i++){
       output+= "<span>"+tokens[i]+"</span>&nbps;"; //note extra space at the end
    }
    $('#preview').innerHTML=output;
});

Answer 2

Вы можете сделать это следующим образом ... создать функцию javascript, которая вызывается каждый раз, когда пользователь нажимает какую-либо клавишу в поле текстового поля.

<script language="javascript">
    $("#names").keypress(function() {
        populateWord('keypress');
    });

    //blur function is to fix the bug, because last word may not contain space in the end, and we only want to perform update when textbox loose focus and word may or may not end with space       
    $("#names").blur(function() {
        populateWord('blur');
    });

    function populateWord(type){
        val = $("#names").val();
        var gotLetter = false; //to avoid word which contains only space in loop back lookup
        //we first check if we got a space then it means we got a word
        if((val[val.length-1] == ' ' $$ type == 'keypress') || type == 'blur'){
           var word = '';
           for(var i= val.length-1; i >= 0; i--){
               if (val[i] == ' ' && gotLetter){
                  //we got the last entered word
                  //now append it to preview div
                  $("#previewDiv").append("<span>"+word+"</span>");
                  break;
                }
           else{
                word = val[i]+word;
                if (val[i] != ' '){
                   gotLetter = true;
               }
             }
           }
        } 

    }

</script>