jquery로 selectize.js 옵션로드하기

selectize.js 입력 필드의 메뉴 옵션이되도록 큰 JSON 파일을로드해야합니다. 아래 작업 예제에서 AJAX 호출은 사용자가 상자에 무엇인가 입력 할 때까지 수행되지 않습니다. 페이지 시작시 JSON 파일을로드하는 데 도움을 주셔서 감사드립니다.jquery로 selectize.js 옵션로드하기

countries.json

[{"name":""}, {"name":"Afghanistan"}, {"name":"Belgium"}, {"name":"China"},{"name":"Denmark"}, {"name":"Estonia"}, {"name":"Finland"}, {"name":"Greece"}]

index.html을 IRC를 채널에서 친절 영혼이 잘 작동하는 것 같다이 솔루션을 향해 나를 지적했다

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>selectize</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script> 
</head> 
<body> 
    <label for="countries">Selectize</label> 
    <select class="form-control pickerSelectClass" id="countries"></select> 

<script> 

$('#countries').selectize({ 
    valueField: 'name', 
    valueField: 'name', 
    labelField: 'name', 
    maxItems: 3, 
    options: [], 
    load: function(query, callback) { 
    if (!query.length) return callback(); 
    $.ajax({ 
     url: 'countries.json', 
     type: 'GET', 
     dataType: 'json', 
     data: { country: query, }, 
     error: function() { callback(); }, 
     success: function(res) { callback(res); } 
    }); 
    } 
}); 

</script> 
</body> 
</html>

출처

2017-12-31 geotheory

$.ajax({ 
    url: 'countries.json', 
    type: 'GET', 
    dataType: 'json', 
    data: { json: JSON.stringify(countries) }, 

    error: function(err) { console.log(err); }, 

    success: function(options) { 
    $('#countries').selectize({ 
    valueField: 'name', 
    labelField: 'name', 
    searchField: 'name', 
    maxItems: 3, 
    preload: true, 
    options: options, 
    create: true, 
    }); 
    } 
});

출처

2017-12-31 23:31:43 geotheory

답변

관련 문제