格式从<input />搜索结果？

Question

我正在尝试制作搜索栏。我正在构建一个多页面移动应用程序，搜索栏将用于搜索页面以便快速导航。我的页面存储在data.JSON文件中，我将其放在本地存储中，以便可以脱机访问它们。问题是，如何对其进行格式化，以便在用户搜索页面时，结果将显示在用户可以单击的搜索栏下方弹出的列表中，该列表将导航到该页面？

//搜索页面//

<div data-role="page" id="SearchPage">
<div data-role="fieldcontain">

<input type="search" name="search" id="SearchView" value="search" placeholder="Search" align="center"/>
 </div> 

//公寓Page //

<div data-role="page" id="AppartmentPage" class="page">
<h1 class="TopText" id="AppartmentT">Apartment</h1>
<img class="Image" src="images/appartment.png" alt="Appartment"/>
<h1 class="BotText" id="AppartmentB">Apartment</h1>
</div>

// // data.JSON

{
 "pages":[
    "Appartment": "Appartment",
    "bed and breakfast": "bed and breakfast"
    "house": "house"
    ]
}

// //脚本

<script type="text/javascript">
$(function () {
    $.getJSON("data.json", function (data) {
        localStorage.setItem('pages', JSON.stringify(data));
    });
});
$(function () {
    $.getJSON("data.json", function (data) {
        localStorage.setItem('languages', JSON.stringify(data));
    });
});
var pages = JSON.parse(localStorage.getItem('pages'));
if (pages != null) {
for (var i = 0; i < pages.length; i++) {
    alert(pages[i]);
}
}
</script>

我的目标是使搜索栏的外观/功能类似于下图中的那个。

Answer 1

您可以使用Autocomplete。将我们的所有网页都显示为<li>。在那里，您可以为每个href提供<li>链接，如下所示：

<li><a href="#yourPageURL">Page1</a></li>

或onclick <li>您可以导航到特定页面。检查此引用link