Approach 2: Re-formatting auto-complete result string

by nickadeemus2002

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>
<script>
 
    var data = [{
        value: "Cloth | V(6811GC)B12",
        description: "Pano para de una mesa de billar snooker de 12 pies:",
        type: "",
        qty: "1",
        price: "49.15",
        tax: "IVA",
        rate: "18"},
    {
        value: "Cloth | V 6811C B6",
        description: "Pano de pool para una cama de billar tomano 6:",
        type: "",
        qty: "1",
        price: "59.83",
        tax: "IVA",
        rate: "18"},
    {
        value: "Cloth | V(6811GC)12C",
        description: "Pano para la cama en una mesa de 12 pies':",
        type: "",
        qty: "1",
        price: "256.26",
        tax: "IVA",
        rate: "18"}];

   
</script>

CSS

div{margin:20px 10px;}

JavaScript

$(function() {


    var newData = $.map(data, function(item, idx) {
        var label = item.value;
        var value = $.trim(label.split('|').pop());
        return $.extend({}, item, {
            label: label,
            value: value
        });
    });
    

    $("#tags").autocomplete({
        source: newData
    });

});