locked
Limit auto complete results to top 10 RRS feed

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

    Monday, September 10, 2018 2:00 PM

All replies

  • User-474980206 posted
    How is the JavaScript array DataList defined? Show the code.
    Monday, September 10, 2018 7:41 PM
  • 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;
                    }
                }
            });

    Monday, September 10, 2018 7:50 PM
  • 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

    Tuesday, September 11, 2018 10:10 AM
  • 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

    Tuesday, September 18, 2018 7:27 AM