2017-09-14 1 views
-1

일부 데이터는 JSON 형식으로되어 있습니다. 이 데이터를 페이지로드시 로컬 브라우저 메모리에 저장하려고합니다. 나중에 JQuery 자동 완성을위한 소스로이 로컬 복사본을 사용해야합니다. 현재이 URL에 자동 완성 소스를 지정하므로 서비스 호출 빈도가 매우 높습니다. 브라우저 로컬 메모리에 데이터를 저장하고 jQuery 자동 완성에 사용하는 방법을 알려주십시오. 감사합니다.페이지로드시 json 데이터를 브라우저 메모리에 저장합니다.

답변

0

당신이 정말로 다음 모든 페이지에 사용할 수있는 영구적으로 로컬로 저장 당신은

$(document).ready(function { 
    $.get('http://example.com', function (data) { 
     localStorage.setItem('autocomplete', data.toString()); 
}); 

과 같은 것을 할 수 있어야 local storage

에서 살펴 봐야 할 경우

var autocompleteData = JSON.parse(localStorage.getItem('autocomplete') 
$('#myautocomplete').autocomplete({source: autocompleteData}); 

그러나 페이지 범위 변수를 선언하고 사용하는 것으로 충분할 수 있습니다. 이렇게하면 페이지로드 당 한 번만 호출되므로 만료 할 필요가 없습니다.

<script> 

    var autocompleteSource; 

    $(document).ready(function { 

     $.get('http://example.com', function (data) { 
      autocompleteSource = JSON.parse(data); 
     }); 

     $('#myautocomplete').autocomplete({source: autocompleteSource}); 

    }); 
</script> 

여기서는 응답을 적절한 형식으로 배열로 구문 분석 할 수 있다고 가정합니다. 의견에 따라

업데이트 :

나는 당신이 검색 (indexOf(..) != -1)를 포함하고있는 당신이 여전히 소스로 기능을 전달해야합니다 생각합니다.

귀하의 autocompleteSource가 중첩 된 데이터의 모든 포함됩니다 : 아마도

$.get('http://example.com', function (data) { 
    autocompleteSource = []; 
    data.countries.map(function(itemCountry) { 
     itemCountry.cities.map(function(itemCity) { 
      itemCity.destinations.map(function(itemDestination { 
       autocompleteSource.push(itemDestination); 
}); 

을 다음 방금 로컬 데이터를 작업하는 방법을 선언 할 것이라고 응답에 대한

$('#myautocomplete').autocomplete(source : function (request, response){ 
    var filtered = autocompleteSource.filter(function(item){ 
     return item.toLowerCase().indexOf(request.term.toLowerCase()) > -1 
    }); 
    response(filtered); 
}); 
+0

감사를 설정합니다. 나는 그것을 영구히 저장하고 싶지 않다. 임시로 저장하는 다른 방법이 있습니까? – Nidhin

+0

@Nidhin - 아래 예를 포함했습니다. –

+0

이것은 현재 소스입니다. 당신은 그것을 "autocompleteSource"로 바꾸는 것을 도와 줄 수 있습니까? source : function (request, response) {$ .ajax ({url : "* service url *", success : function (data) {var search_data = []; data.countries .map (function (itemCountry)) {itemCountry.cities.map (function (itemCity) {itemCity.destinations.map (function (itemDestination) {if ((itemDestination.name.toLowerCase()). indexOf (request.term.toLowerCase))!))! = -1) {itemDestination.label = itemDestination.name; search_data.push (itemDestination);}});})}) 응답 (search_data);}})); } – Nidhin

관련 문제