형식 검색 결과 <input>?

검색 창을 만들려고합니다. 다중 페이지 모바일 앱을 구축하고 검색 창을 사용하여 빠른 탐색을 위해 페이지를 검색합니다. 내 페이지는 데이터에 저장됩니다 .JSON 파일은 오프라인 저장소에 액세스 할 수 있도록 로컬 저장소에 저장합니다. 질문은, 어떻게 사용자가 페이지를 검색 할 때 사용자가 클릭 할 수있는 검색 창 아래에 나타나는 목록에 해당 페이지로 이동하는 결과가 표시되도록 포맷 할 수 있습니까?형식 검색 결과 <input>?

// 검색 페이지 //

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

내 목표는 검색 막대 모양/기능을 아래 이미지와 비슷하게 만드는 것입니다.

출처

2016-07-16 Michael Voulgaris

특정 page.Check을 탐색 할 수 <li>의 onclick : // lunrjs합니다. co.kr/귀하가 원하는 것을 성취하십시오. 하지만 json obj 내부에 많은 텍스트 덩어리를 던지고 있습니다. –

당신은 this.Append에 대한 <li>으로 우리의 모든 페이지를 Autocomplete를 사용할 수 있습니다. 거기 당신은 다음과 같이 모든 <li>에 대한 href 링크를 제공 할 수 있습니다 :

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

아니면 내가 HTTP를 사용하고이 참조 link

출처

2016-07-16 07:35:54 Homen

형식 검색 결과 <input>?

답변

관련 문제