Question

我有以下代码，您可以在输入中搜索，数据列表将在下拉列表中。但我想知道如何更改此内容以从JSON文件中获取数据，而不是在<li><a>...中编写列表

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
</script>

Answer 1

首先，您可以创建外部文件（例如“data.json”）：

function updateList(data) {
    var ul = document.getElementById('myUL');
    for (i = 0; i < data.length; i++) {
        var a = document.createElement('a');
        a.appendChild(document.createTextNode(data[i].name));
        a.setAttribute('href', data[i].href);
        var li = document.createElement('li');
        li.appendChild(a);
        ul.appendChild(li);
    }
}

然后，您可以定义一个函数来使用数据数组更新UI：

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (this.readystate == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        updateList(data);
    }
};
request.open("GET", "data.json", true);
request.send();

您可以使用带有本机javascript的AJAX请求导入json文件：

<ul id="myUL"></ul>

然后，此代码将填充页面中的现有UI元素：

Mat grad;
int scale = 1;
int delta = 0;
int ddepth = CV_8U;
Mat grad_x, grad_y;
Mat abs_grad_x, abs_grad_y;
/// Gradient X
Sobel(matFromSensor, grad_x, ddepth, 1, 0, 3, scale, delta, BORDER_DEFAULT);
/// Gradient Y
Sobel(matFromSensor, grad_y, ddepth, 0, 1, 3, scale, delta, BORDER_DEFAULT);
convertScaleAbs(grad_x, abs_grad_x);
convertScaleAbs(grad_y, abs_grad_y);
addWeighted(abs_grad_x, 0.5, abs_grad_y, 0.5, 0, grad);
cv::Scalar mu, sigma;
cv::meanStdDev(grad, /* mean */ mu, /*stdev*/ sigma);
focusMeasure = mu.val[0] * mu.val[0];

Answer 2

试试这个：

process.destroy()

 var jsonObj = [
    {"name":"Adele","link":"Adele.html"},
    {"name":"Agnes","link":"Agnes.html"},
    {"name":"Billy","link":"Billy.html"},
    {"name":"Bob","link":"Bob.html"},
    {"name":"Calvin","link":"Calvin.html"},
    {"name":"Christina","link":"Christina.html"},
    {"name":"Cindy","link":"Cindy.html"}
]
 
 for(i=0; i < jsonObj.length; i++)
 {
   var li=document.createElement('li');
   li.innerHTML="<a href='"+ jsonObj[i].link +"'>"+ jsonObj[i].name +"</a>";
   document.getElementById('myUL').appendChild(li);
 }
 
document.getElementById('myInput').addEventListener('keyup', function(e) {
    var filteredResult = jsonObj.filter(obj => {
      return obj.name.includes(e.key) === true;
    });
    document.getElementById('myUL').innerHTML = '';
     for(i=0; i < filteredResult.length; i++)
     {
       var li=document.createElement('li');
       li.innerHTML="<a href='"+ filteredResult[i].link +"'>"+ filteredResult[i].name +"</a>";
       document.getElementById('myUL').appendChild(li);
     }
});

搜索列表中的JSON数据

2 个答案: