JQuery Autocomplete with List of Input Boxes

Question

Hello everyone and thanks for the help in advance. I am developing a Asp.Net Core MVC application that generates a list of input boxes from a model.

<li>
	<input id="diagnsosi1" name="diagnosis1" class="searchinput" />
	<input id="diagnsosi1code" name="diagnosis1code" />
	<input id="diagnsosi1codedescription" name="diagnosis1codedescription" />
</li>
<li>
	<input id="diagnsosi2" name="diagnosis2" class="searchinput" />
	<input id="diagnsosi2code" name="diagnosis2code" />
	<input id="diagnsosi2codedescription" name="diagnosis2codedescription" />
</li>
<li>
	<input id="diagnsosi3" name="diagnosis3" class="searchinput" />
	<input id="diagnsosi3code" name="diagnosis3code" />
	<input id="diagnsosi3codedescription" name="diagnosis3codedescription" />
</li>

The search will be done on input with class "searchinput" that will return an autocomplete list. once the selected item is clicked, I want to populate the search box with the entire result, but want to take the result and split it to populate the corresponding code and code description. So basically, I'm thinking using the index function, but not sure how to go about this. Any help would be appreciated.

Answer 1

Hi Kmcnet

A whole working demo you could follow:

Model

public class Test
{
    public string Diagnosis { get; set; }
    public string Description { get; set; }
    public string Code { get; set; }
}

View

<ul>
    <li>
        <input id="diagnsosi1" name="diagnosis1" class="searchinput" />
        <input id="diagnsosi1code" name="diagnosis1code" />
        <input id="diagnsosi1codedescription" name="diagnosis1codedescription" />
    </li>
    <li>
        <input id="diagnsosi2" name="diagnosis2" class="searchinput" />
        <input id="diagnsosi2code" name="diagnosis2code" />
        <input id="diagnsosi2codedescription" name="diagnosis2codedescription" />
    </li>
    <li>
        <input id="diagnsosi3" name="diagnosis3" class="searchinput" />
        <input id="diagnsosi3code" name="diagnosis3code" />
        <input id="diagnsosi3codedescription" name="diagnosis3codedescription" />
    </li>
</ul>
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            $(".searchinput").autocomplete({
                source: function (request, response) {
                    // AJAX call to fetch data from the server
                    $.ajax({
                        url: "/home/search",
                        type: "GET",
                        dataType: "json",
                        data: { term: request.term },
                        success: function (data) {
                            // Process and format the response data
                            response($.map(data, function (item) {
                                return {
                                    label: item.diagnosis,  // Display diagnosis name in the dropdown
                                    value: item.diagnosis + "|" + item.code + "|" + item.description
                                };
                            }));
                        }
                    });
                },
                select: function (event, ui) {
                    const result = ui.item.value.split("|");
                    const diagnosis = result[0];
                    const code = result[1];
                    const description = result[2];
                    $(this).val(diagnosis); // Populate diagnosis input
                    // Get the index from the ID 
                    const index = $(this).attr("id").match(/\d+/)[0];
                    // Populate corresponding code and codedescription fields
                    $("#diagnsosi" + index + "code").val(code);
                    $("#diagnsosi" + index + "codedescription").val(description);
                    return false; 
                }
            });
        });
    </script>
}

Controller

[HttpGet]
public IActionResult Search(string term)
{
    // Example data; replace with database query
    var diagnoses = new List<Test>
    {
        new Test{ Diagnosis = "Diagnosis A", Code = "CodeA", Description = "Description A" },
        new Test{ Diagnosis = "Diagnosis B", Code = "CodeB", Description = "Description B" },
    };
    var results = diagnoses
        .Where(d => d.Diagnosis.Contains(term, StringComparison.OrdinalIgnoreCase))
        .ToList();
    return Ok(results);
}

Besides, the value of id and name in the same input are different but similar, be sure do not misspell. Or you can change them with quite different value.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena

Answer 2

Hello

Your approach to generating a list of input boxes in an ASP.NET Core MVC application is straightforward and effective for capturing multiple diagnoses. Using separate <li> elements for each diagnosis ensures a clean structure, making it easier to manage the inputs.

Here are a few suggestions for improvement:

Dynamic ID Management: Ensure the IDs are unique, especially if this list is dynamically generated, to prevent conflicts in JavaScript and form submissions.

Use of autocomplete: If you plan to implement jQuery Autocomplete, you can enhance the user experience by suggesting diagnosis names as users type in the first input box. Make sure to set up the necessary jQuery UI components and provide the appropriate data source.

Form Validation: Consider implementing client-side validation for these inputs to ensure users provide valid data before submission.

Accessibility: Use appropriate labels for each input field, enhancing accessibility for screen readers.

Overall, this structure will work well as a basis for your input forms!

Answer 3

On the autocomplete select / change event, you can use the event object to get the target input. Then use the target’s id (it’s the prefix) to create the id’s of the other inputs. note: I'd probably not pick a jQuery-UI component for a new project, as jQuery-UI is in support mode only.