0

我有一个这样的 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？

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

4

1 回答 1

0

您应该查看 JQuery、JQueryUI 和 JQuery自动完成小部件

要使用它，您需要将 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 代码来实例化搜索框上的自动完成小部件。您需要将此代码添加到<script>包含 JQuery 框架的下面的块中。

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

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

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

于 2013-07-05T17:01:53.840 回答