Question

我有一个像这样的JSON数据数组：

var trackListings = [{
    "tName": "Breathe",
        "duration": 2.5
}, {
    "tName": "On The Run",
        "duration": 2
}, {
    "tName": "Time",
        "duration": 6
}, {
    "tName": "The Great Gig In the Sky",
        "duration": 5
}, ];

我有另一个页面，只是一个包含搜索框和搜索按钮的简单HTML页面。我想要做的是，从搜索框页面，当我输入我想要搜索的曲目名称时，我想访问上述JSON数组中的所有tName数据并将其显示在另一页上，最好是以表格形式显示。

我应该在按钮表格中写什么？在搜索框页面中搜索输入文本表单？或者我应该清楚地留下表格，像这样？

<form class="form-search" action="window.open('dwChart.html')" method="get">
<input id="srch" type="search" class="input-medium search-query">
<input type="button" value="Search" onclick="searchAction()">

关于JSON数组..我应该把代码块放在哪里？在搜索框页面或结果页面中？如何访问JSON数据？使用JQuery还是明白使用JavaScript？

我真的需要尽快解决这个问题。

Answer 1

您应该查看JQuery，JQueryUI和JQuery autocomplete widget

要使用它，您需要将jquery框架javascript和CSS嵌入到页面的<head>中：

<head>
...
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet">
...
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js?ver=3.4.1"></script>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
...
</head>

然后，您可以添加一些javascript / jquery代码，以在搜索框中实例化自动完成小部件。您需要在包含JQuery框架的下面的<script>块中添加此代码。

如果你的JSON项目列表很短，你可以直接将它嵌入到调用自动完成小部件的javascript代码中：

$( "#srch" ).autocomplete({
  source: [ "Breathe", "On the Run", "Time", "The Great Gig In The Sky"]
});

否则，您可以使用回调函数从页面上的单独对象或单独的文件中查找项目。

谁可以使用搜索框访问JSON数据并将其显示在另一个页面上？

1 个答案: