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

Search JSON Parsed MySQL Data using user input

本文关键字：MySQL 数据 JSON 用户 输入 搜索      更新时间：2023-09-26

嗨，我正在构建一个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>

我的简斯

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;
}

谢谢

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

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

好了，我们走吧！

关于网页

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函数的语句。因此，您可以将修改后的values参数用作函数filterJSON局部变量。

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);
  }
);

关于示例

现在，请尝试以下代码片段！在输入中键入Taiwan title您将看到其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">

相关文章：