Question

I have the following for an autocomplete text box which works fine:

 $('#material_number').autocomplete({
     source: function(request, response) {
         $.ajax({
             url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
             dataType: "json",
             data: {
                 search: request.term,
                 maxRows: 10
             },
             success: function(data) {
                 response(data);
                 console.log();
                 //need to append material_description to a textbox here
             }
         })
     }
 });

What i am trying to to is output the material_description value returned to a textbox called txtMaterialDescription. I have looked at different examples on this site but unable to get it to work. So when the user selects a part number from the autosuggest list, the description field populates the part number description. Can anyone help me out and point me in the right direction please?

many thanks as always.

JC

Answer 1

You need to trap the focus or select event:

focus: function(event, ui) {
    $("#textbox").val(ui.item.someProperty);
}

Now, if your JSON data consists of objects that look like {label: ..., value: ..., someProperty: ...} then you can write:

source: function(request, response) {
    $.ajax({
        url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
        dataType: "json",
        data: {
            search: request.term,
            maxRows: 10
        },
        success: response
    });
}

Otherwise, you can always transform your data using jQuery.map:

source: function(request, response) {
    $.ajax({
        url: "index.cfm?action=leadtime.getmaterialleadtime&returnformat=json",
        dataType: "json",
        data: {
            search: request.term,
            maxRows: 10
        },
        success: function(data) {
            response($.map(data, function(item) {
                return {
                    label: item.productName,
                    value: item.productCode,
                    someProperty: item.productDescription + item.productPrice
                }
            }));
        }
    });
}