重复选择选项时如何节省资源

我正在创建一个大约 50 人的关系，并在一页中设置他们的角色(业务需求(。

人员是一个自由文本字段，
虽然角色包含大约 100 个条目。

最终，页面需要很长时间才能加载。我想让它加载得更快。

所以，我的PHP代码很容易。但是，要加载页面需要很长时间，因为 50 个人中的每一个都有一个<select ...><option></option>**100times**</select>.

<?php
for($p = 0 $p<50, $p++){
  echo "<select ...>";
    foreach ($option as $i=>$value){
      echo "<option value=$i>$value</option>";
          /*** Eventually the HTML of this is huuuuuuge ****/
    }
}

我想在 HTML 中有一些技巧，允许我：

<list name=repeatedList><values></values></list>
<select><use list=repeatedlist></select>

甚至是将生成这 100 个选项的责任转移到浏览器的 jQuery，而不必将这 100 个选项转移 50 次给用户。

您可以在后端呈现一次下拉列表，然后使用 jQuery 将下拉列表复制到所有 Person 行。请考虑以下示例：

$(function() {
  var template = $('#roleTemplate').html();
  $('td.role').html(template);
});

#roleTemplate {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Render the Role template once in PHP -->
<div id="roleTemplate">
  <select name="role[]">
    <option>Role 1</option>
    <option>Role 2</option>
    <option>...</option>
    <option>Role 100</option>
  </select>
</div>
<table>
  <tr>
    <th>Person</th>
    <th>Role</th>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
  <tr>
    <td><input type=text name=person[]></td>
    <td class="role"></td>
  </tr>
</table>

由于下拉列表中有 100 多个选项，我还建议您查看像 Select2 这样的插件，它提供搜索功能和多种数据源类型，包括 ajax 源和静态数组。考虑以下示例，该示例使用静态数组作为所有下拉列表的源，该源可以在 PHP 中生成一次。

$(function() {
  $('select.role').select2({
    data: RoleList,
    width: 200
  });
});

<link href="https://unpkg.com/select2@4.0.7/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/select2@4.0.7/dist/js/select2.min.js"></script>
<script>
  // Generate the Role list in PHP, can be printed with json_encode(array)
  var RoleList = [{
      id: 1,
      text: 'Role 1'
    },
    {
      id: 2,
      text: 'Role 2'
    },
    {
      id: 3,
      text: 'Role 3'
    },
    {
      id: 4,
      text: 'Role 4'
    },
    {
      id: 5,
      text: 'Role 5'
    },
    {
      id: 6,
      text: 'Role 6'
    },
    {
      id: 7,
      text: 'Role 7'
    },
    {
      id: 8,
      text: 'Role 8'
    },
    {
      id: 9,
      text: 'Role 9'
    },
    {
      id: 10,
      text: 'Role 10'
    },
    {
      id: 11,
      text: 'Role 11'
    },
  ]
</script>
<table>
  <tr>
    <th>Person</th>
    <th>Role</th>
  </tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  <tr><td><input type="text" name="person[]"></td><td><select class="role"></select></td></tr>
  
</table>

如果您可以使用 JQuery 自动完成功能，唯一的问题是显示空字符串的一些默认结果，您可能可以执行以下操作：

// initialize cache when rendering website on server side i assume php
var globalAutocompleteCache = {
  '': <?php echo json_encode($options) ?>
};

这可能与其他JS内容在单独的文件中

// initialize inputs with autocomplete
$('#tags').autocomplete({
  // ... other configuration
  // this will turn on caching
  source: (request, response) => {
    var term = request.term;
    if (term in globalAutocompleteCache) { // as empty should be initialized it will return immediatly
      response(globalAutocompleteCache[term]);
    } else {
      // some ajax request 
      $.getJSON("more_data.php", request, function(data, status, xhr) {
        cache[term] = data;
        response(data);
      })
    }
  }
});

未经测试，但类似的东西应该有效。

相关内容

最新更新

热门标签：