Format Search results from <input>?

Question

I am trying to make a search bar. I am building a multi-page mobile app and the search bar will be used to search for pages for quick navigation. my pages are stored in a data.JSON file, that I am putting in local storage so they can be accessed offline. The question is, How can I format it so that when the user searches for a page, the results will be displayed in a list that pops up under the search bar that users can click on that will navigate them to that page?

//search page//

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

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

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

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

my goal is to make the search bar look/function similar to the one in the image below.

Answer 1

You can use Autocomplete for this.Append all our pages as <li> . There you can give the href link for every <li> like following :

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

Or onclick of that <li> you can navigate to the particular page.Check this reference link