我有一个功能,可以在网页上显示70.000option值,有没有“自动建议”的选项?现在是性能问题,搜索2 - 3次后浏览器崩溃
option
while($row_ICAO = $airports_ICAO->fetch_assoc()) { echo "<option value='{$row_ICAO['ICAO']}'></option>"; }
也许有另一种选择来做到这一点,浏览器不会崩溃?
gab6jxml1#
@达耶克,
我更喜欢这个。首先不要提取任何数据时,形式加载。当用户点击select 2输入提供搜索功能,当用户开始键入搜索在那个时候,你需要实现 AJAX 调用提取相关数据(用户类型在select 2搜索输入)从数据库表。请参考这个link
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 }); });
2条答案
按热度按时间gab6jxml1#
@达耶克,
我更喜欢这个。首先不要提取任何数据时,形式加载。当用户点击select 2输入提供搜索功能,当用户开始键入搜索在那个时候,你需要实现 AJAX 调用提取相关数据(用户类型在select 2搜索输入)从数据库表。请参考这个link
w8ntj3qf2#
下面是您可以用于多个选项搜索的示例...
超文本标记语言
查询