フォーマット<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> 

私の目標は、検索バーの外観/機能を下の画像のようにすることです。

Answer 1

あなたはthis.Appendため<li>など、すべての私達のページを​​3210を使用することができます。そこには、次のようにすべての<li>ためhrefのリンクを与えることができます：

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

それとも、私は、HTTPを使用しています。この参照link