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

【问题标题】：Format Search results from <input>?格式化来自 <input> 的搜索结果？
【发布时间】：2016-07-16 06:11:14
【问题描述】：

我正在尝试制作一个搜索栏。我正在构建一个多页移动应用程序，搜索栏将用于搜索页面以进行快速导航。我的页面存储在 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>

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

【问题讨论】：

我正在使用lunrjs.com 来实现您的要求。但我正在搜索在 json obj 中抛出大量文本。

标签： javascript jquery search jquery-mobile input

【解决方案1】：

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

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

或onclick 中的<li> 您可以导航到特定页面。查看此参考link

【讨论】：