locked
Editable combobox not populating properly if more than 1 million records RRS feed

  • Question

  • User-1024101449 posted

    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>
    

    Friday, November 2, 2018 10:48 AM

Answers

  • User475983607 posted

    How to solve this problem.?

    I'm not sure how this is an ASP.NET question,  1 million records is far too many for a human to read on the screen.  Consider rethinking your design so that you're not returning so many records.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 2, 2018 11:31 AM

All replies

  • User475983607 posted

    How to solve this problem.?

    I'm not sure how this is an ASP.NET question,  1 million records is far too many for a human to read on the screen.  Consider rethinking your design so that you're not returning so many records.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 2, 2018 11:31 AM
  • User-1024101449 posted

    thanks for your reply.

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

    But, nearly 10,000 records atleast...

    Friday, November 2, 2018 11:43 AM
  • User475983607 posted

    thanks for your reply.

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

    But, nearly 10,000 records atleast...

    10,000 options in a select is far too many for a human to read.  I recommend that you rethink the approach and find a way to filter the result or perhaps use a different UI element like a grid with paging.

    Friday, November 2, 2018 11:50 AM
  • User-1024101449 posted

    done..

    Thursday, February 7, 2019 5:21 AM