javascript - 使用用户输入搜索 JSON 解析的 MySQL 数据

Question

您好，我正在构建一个 HTML5 应用程序来显示来自远程 MySQL 的数据。

现在以下代码能够获取数据并在应用程序中显示。

我的应用程序中还有 2 个下拉菜单来过滤结果。如何获取下拉列表来过滤 JSON 解析数据？

HTML

//Filter input box/dropdown
<form>
Title:<br>
<input type="text" name="title"><br>
City:<br>
<input type="text" name="city">
</form> 

<div id="id01"></div>

我的JS

var xmlhttp = new XMLHttpRequest();
var url = "http://localhost/mysql.php";

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
 }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";

for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" +
    arr[i].title +
    "</td><td>" +
    arr[i].City +
    "</td><td>" +
    arr[i].level +
    "</td></tr>";
}
out += "</table>";
document.getElementById("id01").innerHTML = out;
}

谢谢

Answer 1

在我们开始之前，让我提一下我修改的一些内容。

1. 我在两个 input 元素上添加了 id。
2. 我为下面的示例创建了一个新的 originalJSONArr。

好的，我们走吧!

关于 HTML

input 元素是交互式的，它有 input event 。这意味着我们可以使用input事件来触发事件；当用户在 input 元素中输入任何内容时执行某些操作。因此，我添加了 id 来标识每个输入。

Title:<br>
<input id="title" type="text" name="title"><br>
City:<br>
<input id="city" type="text" name="city">

关于 JavaScript

我喜欢函数式编程，你可以看到每个工具的函数。如您所见，addEventListeners 是在元素上添加事件，titleEvent 和 cityEvent 是事件触发时执行的回调函数。

另外，还有一个filterJSON函数是由你定义的。这并不难! filterJSON(values); 是使用 values 参数执行 filterJSON 函数的语句。因此，您可以在 filterJSON 函数中使用修改后的 values 参数作为局部变量。

function addEventListeners(filterJSON) {
  var titleInput = document.getElementById('title'), // Get element.
      cityInput = document.getElementById('city'),
      values = {};

  function titleEvent() {
    values.title = this.value; // Get element value.
    filterJSON(values); // Execute callback function 'filterJSON'.
  }

  function cityEvent() {
    values.city = this.value;
    filterJSON(values);
  }

  titleInput.addEventListener('input', titleEvent); // Bind event listener with 'input' event and 'titleEvent' function.

  cityInput.addEventListener('input', cityEvent);
}

最后一部分是达到目的!您可以使用Array.prototype.filter方法来实现我们的目标。如下所示。

var originalJSONArr = [
  {
    title: 'Taiwan',
    city: 'Taipei City'
  },
  {
    title: 'Taiwan',
    city: 'Taichung'
  },
  {
    title: 'USA',
    city: 'New York'
  },
  {
    title: 'USA',
    city: 'Chicago'
  },
  {
    title: 'USA',
    city: 'Miami'
  },
  {
    title: 'USA',
    city: 'Boston'
  }
];

addEventListeners(
  function(values) { // This is the 'filterJSON' callback as mentioned.
    var filteredJSON = originalJSONArr.filter(function(item) {
      return (item.title === values.title || item.city === values.city);
    });
    // You can do anything with filteredJSON as of here.
    console.log(filteredJSON);
  }
);

关于示例

现在，尝试以下代码片段!在title输入中输入Taiwan，您将看到title为Taiwan的对象。或者在city输入中输入特定的城市名称。

function addEventListeners(filterJSON) {
  var titleInput = document.getElementById('title'), // Get element.
      cityInput = document.getElementById('city'),
      values = {};

  function titleEvent() {
    values.title = this.value; // Get element value.
    filterJSON(values); // Execute callback function 'filterJSON'.
  }
  
  function cityEvent() {
    values.city = this.value;
    filterJSON(values);
  }
  
  titleInput.addEventListener('input', titleEvent); // Bind event listener with 'input' event and 'titleEvent' function.

  cityInput.addEventListener('input', cityEvent);
}

var originalJSONArr = [
  {
    title: 'Taiwan',
    city: 'Taipei City'
  },
  {
    title: 'Taiwan',
    city: 'Taichung'
  },
  {
    title: 'USA',
    city: 'New York'
  },
  {
    title: 'USA',
    city: 'Chicago'
  },
  {
    title: 'USA',
    city: 'Miami'
  },
  {
    title: 'USA',
    city: 'Boston'
  }
];

addEventListeners(
  function(values) { // This is the 'filterJSON' callback as mentioned.
    var filteredJSON = originalJSONArr.filter(function(item) {
      return (item.title === values.title || item.city === values.city);
    });
    // You can do anything with filteredJSON as of here.
    console.log(filteredJSON);
  }
);

Title:<br>
<input id="title" type="text" name="title"><br>
City:<br>
<input id="city" type="text" name="city">