Using jQuery UI autocomplete to insert the description of the selected item into a text field

Question

Using jQuery UI autocomplete to insert the description of the selected item into a text field

Currently, I have a functional autocomplete text box with the following code:

 $('#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
             }
         })
     }
 });

I am attempting to display the material_description value returned in a textbox named txtMaterialDescription. Despite researching various examples on this platform, I have not been successful in achieving this functionality. Essentially, when a user selects a part number from the autocomplete list, the description field should automatically populate with the relevant part number's description. Could someone assist me with this and guide me in the right direction?

Thank you in advance.

Sincerely, JC

jquery ajax json jquery-ui jquery-ui-autocomplete

Answer 1

Answer №1

If you want to capture either the focus event or the select event, you can do so with the following code:

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

In case your JSON data comprises objects structured like

{label: ..., value: ..., someProperty: ...}

, you can simplify it with this code snippet:

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

If your data doesn't have a similar structure, you can transform it using jQuery.map as shown here:

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
                }
            }));
        }
    });
}

Answer 2

If you want to capture either the focus event or the select event, you can do so with the following code:

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

In case your JSON data comprises objects structured like

{label: ..., value: ..., someProperty: ...}

, you can simplify it with this code snippet:

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

If your data doesn't have a similar structure, you can transform it using jQuery.map as shown here:

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
                }
            }));
        }
    });
}

Answer 3

Answer №2

If you want to focus on a specific item and load its details, you can use the focus option in your code like this:

   focus: function(event, ui) {
            $(this).val(ui.item.label);

 //perform an ajax call here for the currently focused element
  // once the call is successful, you can execute the following

  //display detailed information
            $("#tags").empty();
            $("#tags").append("Details for "+ui.item.label);

            return false;
        },

For more information and examples, check out this jquery autocomplete example.

Answer 4

If you want to focus on a specific item and load its details, you can use the focus option in your code like this:

   focus: function(event, ui) {
            $(this).val(ui.item.label);

 //perform an ajax call here for the currently focused element
  // once the call is successful, you can execute the following

  //display detailed information
            $("#tags").empty();
            $("#tags").append("Details for "+ui.item.label);

            return false;
        },

For more information and examples, check out this jquery autocomplete example.

Using jQuery UI autocomplete to insert the description of the selected item into a text field

Answer №1

Answer №2

Similar questions

The XML information vanished during the transformation into JSON format

Make the div disappear after a specified time

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

Conditional serialization in Json.NET based on the type of the object being serialized

"Exploring the world of Highcharts: A guide to loading data using

What is the process of transforming a list of arrays, which is in JSON format, into Dart?

What is the best way to prevent the click event of a container div from triggering when clicking on elements within the container using JQuery

Effortless AJAX/jQuery solution for displaying live file updates while copying

Is it possible to include an if or else condition in jQuery JSON response?

Utilize jQuery to extract data from a JSON object

Python: Exploring JSON Data

Activate all inactive input and selection elements

Returning to a page that has been scrolled down and contains dynamic content loaded via ajax

Fetching PHP file in WordPress with ajax

What is the best way to eliminate base tags from jQuery mobile scripts?

Transforming form inputs into JSON structure

The contenteditable div's selectAll feature doesn't function properly when it gains focus

Reveal and conceal grid elements upon clicking embedded links

The Jquery change event binding does not function properly when dealing with dynamically generated content

What could be the reason that Ng Repeat fails to work when a button is triggered from a separate form