autocomplete textbox with multiple values separated by full stop and Elements

autocomplete textbox with multiple values separated by full stop and Elements

<script> $(function() { var availableTags = [ "Electronics", "Motors", "Cloths" ]; var Electronics = [ "Laptops", "Mobiles", "Desktop" ]; var Motors = [ "Bike", "Car" ]; var Cloths = [ "Shirt", "Pants", "Jackets" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#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 ).autocomplete( "instance" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, 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; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">Tag programming languages: </label> <input id="tags" size="50"> </div> </body>
My requirement is when I enter '@' in the textbox the availabletags element should display with a '.' and it show the respective element field item. for example when I enter '@'in the textbox and I choose the 'motors' from the autocomplete list and '.' appears with bike and car. I am trying to achieve it. can someone help me out..