Question

我正在创建一个Google Chrome扩展程序，它基本上只是一个下拉菜单和一个带有数据列表的输入框。更改下拉菜单中的选择将更改输入框使用的数据列表。我大约有一百个数据列表，其中一些具有数千个选项。我正在寻找一种减少html文件（当前大约930 kb）的加载时间的方法，并且我想将数据列表保存在单独的html文件中，并且仅在更改下拉选项时引用它们。

示例html文件

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/internal_main_layout"
    android:background="@android:color/holo_red_light"
    android:orientation="vertical"
    android:minHeight="100dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <MyApp.Droid.Views.TopNavigation
        android:id="@+id/internal_top_navbar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </MyApp.Droid.Views.TopNavigation >

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:layout_weight="8"
        android:layout_above="@+id/bottom_navigation"/>

    <Myapp.Droid.Views.BottomNavigation
        android:id="@+id/internal_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </Myapp.Droid.Views.BottomNavigation >
  </LinearLayout>

示例js文件

<head>
    <script type="text/javascript" src="test.js"></script>
</head>
Select Food group
<select id="foodgroup">
    <option>Select One</option>
    <option>Vegetable</option>
    <option>Fruit</option>
</select>
<br /><br />
Enter name of food
<br /><br />
<input id="entry"></input>
<datalist id="Vegetable">
    <option>Pumpkin</option>
    <option>Squash</option>
    <option>Carrot</option>
    <option>Lettuce</option>
    <option>Bell Pepper</option>
</datalist>
<datalist id="Fruit">
    <option>Apple</option>
    <option>Orange</option>
    <option>Banana</option>
    <option>Pineapple</option>
    <option>Strawberry</option>
</datalist>

Answer 1

您可以在JavaScript中创建包含各种数据列表的数组。如果需要，可以将它们放在单独的文件中，并与脚本标签链接。下面的代码段显示了本地定义的数组，因为此代码段不存在外部文件。选择食物类型后，可以使用适当的数组为数据列表创建新的DOM元素：

var foodgroup = document.getElementById("foodgroup");
var datalistCont = document.getElementById("datalistCont");
//
function start() {
  foodgroup.addEventListener("change", loadDatalist);
}
//
function loadDatalist() {
  datalistCont.innerHTML = "";
  var food = foodgroup.options[foodgroup.selectedIndex].value;
  //
  if (food == "fruit" || food == "veg") {
    var inp = document.createElement("INPUT");
    datalistCont.appendChild(inp);
    inp.setAttribute('list', food);
    //
    var dl = document.createElement("DATALIST");
    dl.id = food;
    datalistCont.appendChild(dl);
    //
    newDatalist = document.getElementById(food);
    //
    var selectedArray = window[food];
    for (var x = 0; x < selectedArray.length; x++) {
      var opt = document.createElement("OPTION");
      opt.value = selectedArray[x];
      newDatalist.appendChild(opt);
    }
  }
}
//
veg = ["Pumpkin", "Squash", "Carrot", "Lettuce", "Bell Pepper"];
fruit = ["Apple", "Orange", "Banana", "Pineapple", "Strawberry"];
//
window.load = start();

Select Food group
<select id="foodgroup">
  <option value="none">Select One</option>
  <option value="veg">Vegetable</option>
  <option value="fruit">Fruit</option>
</select>
<br />
<div id="datalistCont"></div>

我可以从单独的文件中引用/加载<datalist>吗？

1 个答案: