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

Tips for retrieving JSON-formatted data from an API in Python and saving it to a .db file

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

Encountering a "SyntaxError: Unexpected token '/' in... index.ejs while compiling ejs" issue following the recent npm package updates

The "click" event is only effective for a single use

How can the dot badge in Material-UI be enlarged?

Automatically populating username and password fields

Optimal placement and size for the slick slider

PHP isn't getting the AJAX POST data from the JavaScript file

How can you refresh the information shown in a separate component from the search input with a live search bar?

Rails issue: Active Model Serializer searching for incorrect serializer

Interactive pop-up windows in Bootstrap

Incorporate Aria Label into a Website Link

I am currently in the process of verifying email addresses

Tips for incorporating in/out animations with a container for the Slide feature:

Prevent Xdebug from processing multiple requests

Microphone Malfunction: Abrupt End of Input Detected

How can I declaratively bind the properties in Dojo's _hasDropDown method?

Encountering an error when sending data from a React application to a Flask server: Unhandled Promise Rejection - Unexpected < token in

Ways to initiate JavaScript event upon clearing input form field

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use