Question

Im trying to make this dynamic email input field which uses autocomplete on a input text field and places the chosen receivers in a span preceding the input field. These two containers are placed in a div. The div is imitating an input field, while the span and input field is not visible.

I want to make this look smooth like in most email software. Making the div box just contain the selected receivers and making sure an empty input field is not taking up space.

Problem at the moment is however that the input field requires space and usually ends up occupying the last row of the div. How can avoid this?

Here is the containers:

<div class="message-userfield" ><span id="fake_to"></span><input type="text" name="auto" id="auto" /></div>

I tried using jquery to make the width of the input field smaller when not inputing data, however the input field doesn’t “jump up” next to the span. How can i make this happen.

$("#auto").focus(function(){
        $(this).css({width:'200px'});
    });

    $("#auto").blur(function(){
        $(this).css({width:'10px'});
    });

How would you make this input field look smooth and dynamic? Help would be appreciated!

Answer 1

are you looking for something like this:
http://jqueryui.com/demos/autocomplete/#multiple ?