Editable combobox not populating properly if more than 1 million records[Answered] RSS

4 replies

Last post Feb 07, 2019 05:21 AM by gani7787

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

gani7787

Member

209 Points

701 Posts

Editable combobox not populating properly if more than 1 million records

Nov 02, 2018 10:48 AM|gani7787|LINK

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 {
    position: relative;
    display: inline-block;
    height:35px;
    }
    .custom-combobox-toggle {
    position: absolute;
    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>

- Reply
mgebhard
All-Star

53001 Points

23594 Posts

Re: Editable combobox not populating properly if more than 1 million records

Nov 02, 2018 11:31 AM|mgebhard|LINK

gani7787
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.
- Reply
gani7787
Member

209 Points

701 Posts

Re: Editable combobox not populating properly if more than 1 million records

Nov 02, 2018 11:43 AM|gani7787|LINK

thanks for your reply.

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

But, nearly 10,000 records atleast...
- Reply
mgebhard
All-Star

53001 Points

23594 Posts

Re: Editable combobox not populating properly if more than 1 million records

Nov 02, 2018 11:50 AM|mgebhard|LINK

gani7787

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.
- Reply
gani7787
Member

209 Points

701 Posts

Re: Editable combobox not populating properly if more than 1 million records

Feb 07, 2019 05:21 AM|gani7787|LINK

done..

‹ Previous Thread|Next Thread ›

Editable combobox not populating properly if more than 1 million records[Answered] RSS

4 replies

Shortcuts

Related Links

Editable combobox not populating properly if more than 1 million records

Re: Editable combobox not populating properly if more than 1 million records

gani7787

Re: Editable combobox not populating properly if more than 1 million records

Re: Editable combobox not populating properly if more than 1 million records

gani7787

Re: Editable combobox not populating properly if more than 1 million records