Question

I have a textbox called names that allows a user to enter individual words, each word separated by a space.

I then have a div called preview which contains nothing initially, but with each character that appears in the names textbox, I’d like to show this in the preview div, with each individual word (based on ‘space’ seperation) to be output as individual span tags (so I can then apply a style to each individual ‘name’ within the preview.

I should also mention that in some scenarios, values will be arriving in the names textbox via a jQuery UI Autocomplete list (which I’ve already got working), and also pre-filled (when I’m editing a record for example and prefill the textbox with previously chosen names).

My jQuery isn’t great and I’ve had a look around for a solution, but not had much success.

How would I go about achieving this?

Answer 1

I would just take all the text from the names textbox and populate it in the preview div at each key-stroke unless performance becomes an issues.

$('#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;
});