Re-formatting auto-complete result string

by Hifni Nazeer

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="tags-wrapper">    
    <p>Tags</p>
    <input type="text" id="tags">
</div>

CSS

div{margin:20px 10px;}

#tags-wrapper
{
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#eeeeee;
    border-radius: 10px;
}

JavaScript

$(function() {
    var availableTags = [
        "Cloth | Green 777",
        "Cloth | Blue 777",
        "Cloth | Orange 777",
        "Cloth | Pink 777",
        "Cloth | Check 777",
        "Plastic | Green 777",
        "Plastic | Blue 777",
        "Plastic | Orange 777",
        "Plastic | Pink 777",
        "Plastic | Check 777"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags,
        select: function(event,ui){    
            event.preventDefault();   
            var selectedArr = ui.item.value.split("|");
            this.value=selectedArr[1];            
        }       
    });
    
});