Limit auto complete results to top 10

Question

User1324715958 posted

I'm using a slice to limit the results but its not working. I've reviewed a few other samples but im not sure how to apply them. Here is my auto complete function code:

function populate()
    {
        $("#edit-search-api-fulltext").autocomplete({ source: DataList.slice(0,10) });
    }

Answer 1

User-474980206 posted
How is the JavaScript array DataList defined? Show the code.

Answer 2

User1324715958 posted

Comes from a XML doc ultimately

code:

function BuildDataList() {
        $.ajax({
            type: "GET",
            async: false,
            url: "/eweb/include/xmlautocomplete.xml",
            cache: false,
            dataType: "xml",
            success: function (xml)
            {
                var Category = $('#filter :selected').text();

                switch (Category)
                {
                    case "All":
                        Category = "Planning and Strategy";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Leadership and Governance";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Marketing and Communications";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Workforce";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Coding and Billing";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Nursing Leadership";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Health Information Technology";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Environmental Services";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Materials Management";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Human Resources";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Facilities Management";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Data Products";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Health Forum eSource";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Risk Management";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Volunteers and Auxilians";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });

                        Category = "Design and Construction";

                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Design and Construction":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Environmental Services":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Coding and Billing":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Data Products":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Facilities Management":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Health Forum eSource":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Health Information Technology":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Human Resources":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Leadership and Governance":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Learning Product":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Marketing and Communications":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Materials Management":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Nursing Leadership":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Planning and Strategy":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Risk Management":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Volunteers and Auxilians":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Workforce":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    //Added 8/28/2018 MAH
                    case "Social Work":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Patient Safety Quality and Advocacy":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    case "Membership":
                        $(xml).find('PRODUCT[Category="' + Category + '"]').each(function () {
                            $(this).find("prd_name").each(function () {
                                var name = $(this).text();
                                DataList.push(name);
                            });
                        });
                        break;
                    default:
                        alert("No Products Available Currently!");
                        break;
                }
            }
        });

Answer 3

User839733648 posted

Hi  UOKSoftware,

According to your description and code, I’m sorry that I could not reproduce your problem.

I’ve made a demo on my side, and I just could check the function .autocomplete() works.

I think maybe there is a problem in the  function BuildDataList().

If possible, please provide the XML doc so that it wil be easier for us to help with you.

PS.If your XML doc is large, you could share it on GitHub or OneDrive site.

Best Regards,

Jenifer

Answer 4

User61956409 posted

Hi UOKSoftware,

Limit auto complete results to top 10

If you want to display only top 10 matched results in dropdown list, you can refer to the following sample to achieve the requirement. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="//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>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>
</body>
</html>
<script>
    var availableTags = [
        "A1",
        "A2",
        "A3",
        "A4",
        "C",
        "C++",
        "A5",
        "A6",
        "A7",
        "A8",
        "A9",
        "A10",
        "A11",
        "A12",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

    $('#tags').autocomplete({
        source: availableTags,
        create: function () {
            $(this).data('ui-autocomplete')._renderMenu = function (ul, items) {
                var that = this;

                //pass top ten items to renderitem
                var top_ten_items = items.slice(0, 10);
                $.each(top_ten_items, function (index, item) {
                    that._renderItemData(ul, item);
                });

                $(ul).find("li:odd").addClass("odd");
            };

        }

    });
</script>

Test result:

With Regards,

Fei Han