Javascript 通过从json文件获取输入，我创建了一个html表。如何为其提供过滤搜索功能？

通过从json文件获取输入，我创建了一个html表。如何为其提供过滤搜索功能

我创建了一个输入字段，但我不知道如何进一步处理它

帮我完成这项工作

与用户搜索时一样，它应该动态提供结果。 例如，如果我键入“A”，则应显示包含“A”的结果

在此处输入代码
将JSON数据转换为HTML表示例
表，th，td
{
利润率：10px0；
边框：实心1px#333；
填充物：2px4px；
字体：15px Verdana；
}
th{
字体大小：粗体；
}
//函数CreateTableFromJSON（）{
var乘积=[
{
“序号”：“1”，
“品牌”：“苹果”，
“型号”：“iphone5s”，
“价格”：“60000”
},
{
“序号”：“2”，
“品牌”：“三星”，
“型号”：“galaxys8”，
“价格”：“60000”
},
{
“序号”：“2”，
“品牌”：“苹果”，
“型号”：“iphone4s”，
“价格”：“40000”
},
{
“序号”：“2”，
“品牌”：“红米”，
“模型”：“3sprime”，
“价格”：“9000”
},
{
“序号”：“2”，
“品牌”：“红米”，
“型号”：“注4”，
“价格”：“14000”
},
{
“序号”：“2”，
“品牌”：“苹果”，
“型号”：“iphone3s”，
“价格”：“30000”
},
{
“序号”：“2”，
“品牌”：“三星”，
“型号”：“galaxys7”，
“价格”：“40000”
},
{
“序号”：“2”，
“品牌”：“红米”，
“型号”：“注3”，
“价格”：“12000”
},
{
“序号”：“3”，
“品牌”：“苹果”，
“型号”：“iphone5”，
“价格”：“45000”
}
]
//提取HTML头的值。
//（“图书ID”、“图书名称”、“类别”和“价格”）
var col=[]；
对于（变量i=0；i

您需要构建

myFunction

来执行搜索操作。我搜索了

品牌

和

型号

，您可以根据需要添加其他产品

    function myFunction(){
      var table, input, filter;
      var searchResult = [];

      table = document.getElementById("myTable");
      table.innerHTML = "";

      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();

      for(var i=0; i<data.length; i++){
        if (data[i].Brand.toUpperCase().indexOf(filter) > -1) {
          searchResult.push(data[i]);
        } else if (data[i].Model.toUpperCase().indexOf(filter) > -1) {
          searchResult.push(data[i]);
        }
      }

      fillTable(table, searchResult);

    }

还建议您将脚本拆分为函数，以便在搜索中重用它们

函数readJson：

function readJSON() {
  var product = [{
      "S.NO": "1",
      "Brand": "Apple",
      "Model": "iphone5s",
      "Price": "60000"
    },
    {
      "S.NO": "2",
      "Brand": "Samsung",
      "Model": "galaxys8",
      "Price": "60000"
    },
    {
      "S.NO": "2",
      "Brand": "Apple",
      "Model": "iphone4s",
      "Price": "40000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "3sprime",
      "Price": "9000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "Note4",
      "Price": "14000"
    },
    {
      "S.NO": "2",
      "Brand": "Apple",
      "Model": "iphone3s",
      "Price": "30000"
    },
    {
      "S.NO": "2",
      "Brand": "Samsung",
      "Model": "galaxys7",
      "Price": "40000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "note3",
      "Price": "12000"
    },
    {
      "S.NO": "3",
      "Brand": "Apple",
      "Model": "iphone5",
      "Price": "45000"
    }
  ]

  // EXTRACT VALUE FOR HTML HEADER.
  // ('Book ID', 'Book Name', 'Category' and 'Price')


  return product;
}

函数填充表

：

    function fillTable(table, product){
      var col = [];
      for (var i = 0; i < product.length; i++) {
        for (var key in product[i]) {
          if (col.indexOf(key) === -1) {
            col.push(key);
          }
        }
      }
    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
    var tr = table.insertRow(-1); // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < product.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        tabCell.innerHTML = product[i][col[j]];
      }
    }

函数填充表（表，产品）{
var col=[]；
对于（变量i=0；i

无需重新发明控制盘。有很多可用的表脚本可用于此功能

function readJSON() {
  var product = [{
      "S.NO": "1",
      "Brand": "Apple",
      "Model": "iphone5s",
      "Price": "60000"
    },
    {
      "S.NO": "2",
      "Brand": "Samsung",
      "Model": "galaxys8",
      "Price": "60000"
    },
    {
      "S.NO": "2",
      "Brand": "Apple",
      "Model": "iphone4s",
      "Price": "40000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "3sprime",
      "Price": "9000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "Note4",
      "Price": "14000"
    },
    {
      "S.NO": "2",
      "Brand": "Apple",
      "Model": "iphone3s",
      "Price": "30000"
    },
    {
      "S.NO": "2",
      "Brand": "Samsung",
      "Model": "galaxys7",
      "Price": "40000"
    },
    {
      "S.NO": "2",
      "Brand": "Redmi",
      "Model": "note3",
      "Price": "12000"
    },
    {
      "S.NO": "3",
      "Brand": "Apple",
      "Model": "iphone5",
      "Price": "45000"
    }
  ]

  // EXTRACT VALUE FOR HTML HEADER.
  // ('Book ID', 'Book Name', 'Category' and 'Price')


  return product;
}

    function fillTable(table, product){
      var col = [];
      for (var i = 0; i < product.length; i++) {
        for (var key in product[i]) {
          if (col.indexOf(key) === -1) {
            col.push(key);
          }
        }
      }
    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
    var tr = table.insertRow(-1); // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
      var th = document.createElement("th"); // TABLE HEADER.
      th.innerHTML = col[i];
      tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < product.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        tabCell.innerHTML = product[i][col[j]];
      }
    }