Utilizing Jquery Autocomplete with multiple arrays for data sourcing

Question

Utilizing Jquery Autocomplete with multiple arrays for data sourcing

I am facing a challenge where I want to display both doctors and their connections in an autocomplete search using jQuery. Although I have successfully displayed the doctors, I'm struggling to categorize and display data from both arrays separately under doctor and connection headings. The JSON returned from the server is structured like this:

    {"connections":
    [{"ConnectionID":"8","ConnectionName":"Saima Fayyaz","ImageName":"201304061217391.5x1.5.jpg"}],
    "doctors":
[{"DoctorID":"4","DoctorName":"Imran Saeed Ali","ImageName":"20130516210722ImranSAli.jpg","Type":"Doctor"},
{"DoctorID":"8","DoctorName":"Saima Fayyaz","ImageName":"201304061217391.5x1.5.jpg","Type":"Doctor"},
{"DoctorID":"10","DoctorName":"Sabira  Javaid","ImageName":"20130406123414123.jpg","Type":"Doctor"}]}

My JavaScript code snippet for the autocomplete functionality is as follows:

<script type= "text/javascript">
$(document).ready(function () {

    $("#people").autocomplete({
        minLength: 0,
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("Search","SearchPathologist")',
                dataType: "json",
                data: {
                    term: request.term,
                    flag: "all"
                },
                success: function (data) {
                    //alert(data.doctors);
                    response($.map(data.doctors, function (item) {
                        // alert(item.Type);
                        return {
                            //data: item.doctors
                              id: item.DoctorID,
                              name: item.DoctorName,
                              photo: item.ImageName,

                        }
                    }));

                }
            });
        },
        focus: function (event, ui) {

        }

    })
.data("autocomplete")._renderItem = function (ul, item) {

    return $("<li></li>")
    .data("item.autocomplete", item)
    .append("<div style='width:100%; margin:auto; background:white; min-height:20px;'><div style='border-bottom:1px dashed gray;'><div style='float:left;  width:16%; min-height:35px; margin:auto;'><img src='http://olivecliq.com:84/carepoint/doctor_images/"+item.photo+"' width='31px' style='margin-top:4px; margin-left:1px;' /></div><div class='mid_card'><h2> " + item.name + "</h2><h3>Use StrongVPN &amp; have a USA or UK IP address anywhere.</h3></div><div style='float:left;width:10%; min-height:25px; margin:auto;'> <img src='@Url.Content("~/images/arrow.png")' width='25' style='margin-top: 10px;' /></div><div style='clear:both;'></div></div>")
    .appendTo(ul);


});

Any assistance on how to handle this situation would be highly appreciated.

javascript arrays json jquery-ui autocomplete

Answer 1

Answer №1

To overcome the issue, I implemented a similar solution.

Below is the jQuery code utilized:

<script type="text/javascript">
$(document).ready(function () {
    var drew = false;
    $("#people").on("keyup", function (event) 
    {
        var query = $("#people").val();

        if ($("#people").val().length >= 1) 
        {
            $('div#loaderContainer').show();
            $.ajax({
                url: '@Url.Action("Search","SearchPathologist")',
                dataType: "json",
                data:
                    {
                        term: query,
                        flag: "all"
                    },
                    error: function()
                    {
                    $.fallr('show', {
        content: '<p>An error occurred! Your session may have expired.</p>'
                    });
                    },
                success: function (data) 
                {
                    $('div#loaderContainer').hide();

                        if (drew == false) 
                        {
                            $("#people").after("<ul id='res' class='ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all' role='listbox' aria-activedescendant='ui-active-menuitem' style='z-index: 10005; display: block; width: 293px;'></ul>");
        
                            drew = true;

                            $("#res").on("click", "li.item", function () 
                            {
                                $("#people").val($(this).text());
                                $("#res").empty();
                            });
                        }
                        
                        else 
                        {
                            $("#res").empty();
                        }

                        $.each(data.doctors, function (i, item) {
                            // Code omitted for brevity
                        });

                        $.each(data.connections, function (i, item) {
                            // Code omitted for brevity
                        });

                    if($('button#searchDDL').html() == "Doctors")
                    {
                    $('div#connections').hide();
                    }
                    if($('button#searchDDL').html() == "Connections")
                   {
                   $('div#doctors').hide();
                   }

                }


            });
        }

        else
        {
        $("#res").empty();
        $( "#res" ).remove();
        drew = false;
        }
    });

    $("input#people").focusout(function () {

$( "#res" ).remove();
drew = false;
});
});

</script>

The HTML used is as follows:

 <div class="search_input"><input type="text" id="people" placeholder="Search for specialist doctors and more.." />
</div>
<button type="submit" class="search-button" value="Search" name="search">
        <span><img src="@Url.Content("~/images/search-icon.png")" height="20" /></span>
      </button>
</div>

Moreover, the action taken is described below:

public JsonResult Search(string term, string flag)
{
// Code implementation here
}

WCF Service method utilized:

public SearchResult Search(string PersonID,string term,string flag)
{
// Code implementation here
}

Defined classes like SearchResult, Doctor, and Connection:

// Class definitions

Tutorial post on this implementation available at:

Answer 2

To overcome the issue, I implemented a similar solution.

Below is the jQuery code utilized:

<script type="text/javascript">
$(document).ready(function () {
    var drew = false;
    $("#people").on("keyup", function (event) 
    {
        var query = $("#people").val();

        if ($("#people").val().length >= 1) 
        {
            $('div#loaderContainer').show();
            $.ajax({
                url: '@Url.Action("Search","SearchPathologist")',
                dataType: "json",
                data:
                    {
                        term: query,
                        flag: "all"
                    },
                    error: function()
                    {
                    $.fallr('show', {
        content: '<p>An error occurred! Your session may have expired.</p>'
                    });
                    },
                success: function (data) 
                {
                    $('div#loaderContainer').hide();

                        if (drew == false) 
                        {
                            $("#people").after("<ul id='res' class='ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all' role='listbox' aria-activedescendant='ui-active-menuitem' style='z-index: 10005; display: block; width: 293px;'></ul>");
        
                            drew = true;

                            $("#res").on("click", "li.item", function () 
                            {
                                $("#people").val($(this).text());
                                $("#res").empty();
                            });
                        }
                        
                        else 
                        {
                            $("#res").empty();
                        }

                        $.each(data.doctors, function (i, item) {
                            // Code omitted for brevity
                        });

                        $.each(data.connections, function (i, item) {
                            // Code omitted for brevity
                        });

                    if($('button#searchDDL').html() == "Doctors")
                    {
                    $('div#connections').hide();
                    }
                    if($('button#searchDDL').html() == "Connections")
                   {
                   $('div#doctors').hide();
                   }

                }


            });
        }

        else
        {
        $("#res").empty();
        $( "#res" ).remove();
        drew = false;
        }
    });

    $("input#people").focusout(function () {

$( "#res" ).remove();
drew = false;
});
});

</script>

The HTML used is as follows:

 <div class="search_input"><input type="text" id="people" placeholder="Search for specialist doctors and more.." />
</div>
<button type="submit" class="search-button" value="Search" name="search">
        <span><img src="@Url.Content("~/images/search-icon.png")" height="20" /></span>
      </button>
</div>

Moreover, the action taken is described below:

public JsonResult Search(string term, string flag)
{
// Code implementation here
}

WCF Service method utilized:

public SearchResult Search(string PersonID,string term,string flag)
{
// Code implementation here
}

Defined classes like SearchResult, Doctor, and Connection:

// Class definitions

Tutorial post on this implementation available at:

Utilizing Jquery Autocomplete with multiple arrays for data sourcing

Answer №1

Similar questions

How can you fetch data from a PHP file using AJAX before performing a header redirect?

Trouble with Ajax Request in HTML

Combine all possible pairings of elements from two distinct arrays

The server response value is not appearing in Angular 5

Postman is displaying [object object] as the return value, but the actual value is not

combine two 2D arrays in JavaScript

What is the process for altering a route in React 18?

React to the animated scaling

Utilize Flutter to implement a json.decode function that can transform a String into a usable format for display in the user interface

How can I eliminate the repeated elements in a JSP JAVA array table?

Replace the phrase "add to cart" with "plus" and "minus" in Opencart

Does Leaflet.js provide a method to cycle through all markers currently on the map?

Using handlebars template to render multiple objects in MongoDB with node.js and mongoskin

Can this be executed in PHP?

Converting JSON to CSV using JQ command in Linux shell

Entry Points for Logging In

Using web3Provider in a Next.js environment

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

Getting the directory path from JSON using Python

Steps for implementing a Toggle Navigation Bar in CSS