Question

I need help, I am stuck with trying to make the following case scenario work:
You have email input field, you type: foo@y – it should pop up autocomplete box, offering yahoo.com (for example).
If you take this suggestion, the end value should become: [e-mail]

I have wrote this code (modified off another jquery UI sample):

        $( "#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: 3,
                source: function( request, response ) {
                            var mail_regex = /^([\w.]+)@([\w.]+)$/;
                            var match = mail_regex.exec(request.term);
                            if (match)
                                var matcher = new RegExp( "^" + match[2], "i" );
                            response( $.grep( availableTags, function( item ){
                                return matcher.test( item );
                            }) );
                 },
                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;
                }
            });

Full working interactive sample:
http://jsfiddle.net/rRF2s/3/

However, it REPLACES the foo@ with just yahoo.com - I can not for the life of me figure out how to override this behaviour...

Any Javascript/jQuery masters - help please! how to accomplish this goal?
I tried doing: return match[1]+matcher.test( item ), but that does not work.

Answer 1

The select function is assigning the resultant value with this.value =. However it is replacing the input value completely rather than appending it with the drop down value.

Without a great deal of testing the following, simplified function seems to work as required:

select: function( event, ui ) {
    this.value = this.value.substring(0, this.value.indexOf('@') + 1) + ui.item.value;
    return false;
}

This is taking the first part of the already entered value, for example foo@ for the input foo@ya and then adding on the value of the selected item from the drop down.

You may want to trigger the dropdown when someone enters the @ symbol (seems more intuitive to me) and if so, this function may also need modifying to correctly extract the user entered value.