格式化来自 <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>

//公寓页面//

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

我的目标是使搜索栏 look/function 类似于下图中的搜索栏。

Answer 1

您可以将 Autocomplete 用于 this.Append 我们所有的页面，如 <li>。在那里，您可以为每个 <li> 提供 href link，如下所示：

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

或 onclick <li> 您可以导航到特定的 page.Check 此引用 link

格式化来自 <input> 的搜索结果？

Format Search results from <input>?

javascript

search

jquery

input

jquery-mobile