PHP -大数据列表选项

x6492ojm  于 2023-01-29  发布在  PHP
关注(0)|答案(2)|浏览(128)

我有一个功能,可以在网页上显示70.000option值,有没有“自动建议”的选项?现在是性能问题,搜索2 - 3次后浏览器崩溃

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

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

也许有另一种选择来做到这一点,浏览器不会崩溃?

gab6jxml

gab6jxml1#

@达耶克

我更喜欢这个。首先不要提取任何数据时,形式加载。当用户点击select 2输入提供搜索功能,当用户开始键入搜索在那个时候,你需要实现 AJAX 调用提取相关数据(用户类型在select 2搜索输入)从数据库表。请参考这个link

w8ntj3qf

w8ntj3qf2#

下面是您可以用于多个选项搜索的示例...
超文本标记语言

<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>

查询

$.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
        });
    });

相关问题