PHP - big datalist option-CodePudding

I have function which show 70.000 option values in webpage, is there any option to do "autosuggestion"? Now there is the problem with performance, the browswere are crashed after 2 - 3 searches

while($row_ICAO = $airports_ICAO->fetch_assoc()) {

echo "<option value='{$row_ICAO['ICAO']}'></option>";
}

Maybe there is another option to do this and browsers won't crash?

CodePudding user response：

@Dayek,

I will prefer this. First don't fetch any data when form load. when user click on select2 input provide search functionality, when user start typing for search at that time you need to implement ajax call for fetch related data ( user type in select2 search input ) from database table. Please refer this link

CodePudding user response：

Here is example you can use for multiple option search...

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select id="ioList" style="width:300px;"><option value="0">item 0</option><option value="1">item 1</option><option value="2">item 2</option><option value="3">item 3</option><option value="4">item 4</option><option value="5">item 5</option><option value="6">item 6</option><option value="7">item 7</option><option value="8">item 8</option><option value="9">item 9</option><option value="10">item 10</option><option value="11">item 11</option><option value="12">item 12</option><option value="13">item 13</option><option value="14">item 14</option><option value="15">item 15</option>
......
<option value="997">item 997</option><option value="998">item 998</option><option value="999">item 999</option>
</select>

Jquery

$.fn.select2.amd.require(
    ['select2/data/array', 'select2/utils'],
    function (ArrayData, Utils) {
        function CustomData($element, options) {
            CustomData.__super__.constructor.call(this, $element, options);
        }
        
        function contains(str1, str2) {
            return new RegExp(str2, "i").test(str1);
        }

        Utils.Extend(CustomData, ArrayData);
        
        CustomData.prototype.query = function (params, callback) {
            if (!("page" in params)) {
                params.page = 1;
            }
            var pageSize = 50;
            var results = this.$element.children().map(function(i, elem) {
                if (contains(elem.innerText, params.term)) {
                    return {
                        id:[elem.innerText, i].join(""),
                        text:elem.innerText
                    };
                }
            });
            callback({
                results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
                pagination:{
                    more:results.length >= params.page * pageSize
                }
            });
        };

        $("#ioList").select2({
            ajax:{},
            allowClear:true,
            width:"element",
      multiple:true,
            dataAdapter:CustomData
        });
    });