none
Editable combobox not populating properly if more than 1 million records

    Pertanyaan

  • Hi,

    I am using editable dropdown for searching or selecting records.

    This will be working fine if we have less number of records (for example < 100 records).

    if we have more than 1 million records, then it will not populate anything and it got struct.

    i am using asp.net dropdown  with autocomplete jQuery.

    How to solve this problem.?

    sample code attached.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Combobox.aspx.cs" Inherits="Combobox.Combobox" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <style>
        .custom-combobox {
        ;
        display: inline-block;
        height:35px;
        }
        .custom-combobox-toggle {
        ;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        /* support: IE7 */
        *height: 1.7em;
        *top: 0.1em;
        }
        .custom-combobox-input {
        margin: 0;
        padding: 0.3em;
        background:#fff;
        outline:none;
        }
    </style>
    <script>
        (function ($) {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
            .addClass("custom-combobox")
            .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function () {
                    var selected = this.element.children(":selected"),
            value = selected.val() ? selected.text() : "";

                    this.input = $("<input>")
            .appendTo(this.wrapper)
            .val(value)
            .attr("title", "")
            .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
            .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy(this, "_source")
            })
            .tooltip({
                tooltipClass: "ui-state-highlight"
            });

                    this._on(this.input, {
                        autocompleteselect: function (event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });
                        },

                        autocompletechange: "_removeIfInvalid"
                    });
                },

                _createShowAllButton: function () {
                    var input = this.input,
            wasOpen = false;

                    $("<a>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .tooltip()
            .appendTo(this.wrapper)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass("ui-corner-all")
            .addClass("custom-combobox-toggle ui-corner-right")
            .mousedown(function () {
                wasOpen = input.autocomplete("widget").is(":visible");
            })
            .click(function () {
                input.focus();

                // Close if already visible
                if (wasOpen) {
                    return;
                }

                // Pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
            });
                },

                _source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
            valueLowerCase = value.toLowerCase(),
            valid = false;
                    this.element.children("option").each(function () {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
            .val("")
            .attr("title", value + " didn't match any item")
            .tooltip("open");
                    this.element.val("");
                    this._delay(function () {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.data("ui-autocomplete").term = "";
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);
    </script>
        <script language="javascript">
            $(document).ready(function () {
                $(".combo").combobox();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <table>
            <tr>
                <td>
                    Asp.net Dropdown as combobox
                </td>
                <td style="width: 40px;">
                </td>
                <td>
                    HTML Select as combobox
                </td>
            </tr>
            <tr>
                <td>
                    <asp:DropDownList ID="ddlCountries" runat="server" CssClass="combo">
                    </asp:DropDownList>
                </td>
                <td>
                </td>
                <td>
                    <select id="selCountries" class="combo">
                        <option value=""></option>
                        <option value="India">India</option>
                        <option value="USA">USA</option>
                        <option value="China">China</option>
                        <option value="New Zealand">New Zealand</option>
                        <option value="England">England</option>
                    </select>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>



    • Diedit oleh Gani tpt Jumat, 02 November 2018 10.55
    • Dipindahkan oleh CoolDadTx Jumat, 02 November 2018 13.50 ASP.NET related
    Jumat, 02 November 2018 10.44

Semua Balasan

  • Hello,

    How to solve this problem.?

    Simple - do not try to populate ComboBox unless entered filtration return reasonable amount of rows.


    Sincerely, Highly skilled coding monkey.

    Jumat, 02 November 2018 11.14
  • Hello,

    That many records is way too many. Instead look at Kendo UI Autocomplete widget via virtualization.

    The Kendo UI free edition is here, it's not a trial but totally free.

    One of the cool things about Kendo is their DoJo, you can try it out, tweak it online before getting it.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    Jumat, 02 November 2018 11.32
  • thanks for your reply.

    At max i said (But, this much records is not possible).

    But, nearly 10,000 records atleast...

    Anyother idea...


    Jumat, 02 November 2018 11.47
  • can i have sample code...?
    Jumat, 02 November 2018 11.47
  • > sample code

    Server side - simply do not call DataBinde() if there are too much data.

    > 10.000 

    Try to do simple think - get page with hardcoded options for 10.000 entry. 

    And see what you will be able to do in ComboBox with such amount of Options... 


    Sincerely, Highly skilled coding monkey.

    Jumat, 02 November 2018 12.50
  • Please post questions related to ASP.NET in the ASP.NET forums.

    Michael Taylor http://www.michaeltaylorp3.net

    Jumat, 02 November 2018 13.50