Format Suchergebnisse von <input>?

Question

Ich versuche eine Suchleiste zu erstellen. Ich erstelle eine mehrseitige mobile App und die Suchleiste wird verwendet, um nach Seiten für eine schnelle Navigation zu suchen. Meine Seiten sind in einer data.JSON-Datei gespeichert, die ich in den lokalen Speicher einlege, so dass sie offline zugänglich sind. Die Frage ist: Wie kann ich es so formatieren, dass, wenn der Benutzer nach einer Seite sucht, die Ergebnisse in einer Liste angezeigt werden, die unter der Suchleiste erscheint, auf die Benutzer klicken können, um sie zu dieser Seite zu navigieren?

// search Seite //

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

<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" 
    ] 
} 

// Skript //

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

Mein Ziel ist es, die Suchleiste ähnlich wie im Bild unten aussehen/funktionieren zu lassen.

Answer 1

Sie können alle unsere Seiten als <li>Autocomplete für this.Append verwenden. Dort können Sie die href Link für jeden <li> geben wie folgt vor:

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

Oder onclick dieser <li> Sie auf die jeweilige page.Check diesem Referenz link