Loading selectize.js Optionen mit jquery

Ich muss eine große JSON-Datei laden, um die Menüoptionen für ein selectize.js Eingabefeld werden. In meinem Arbeitsbeispiel unten wird der AJAX-Anruf nicht gemacht, bis die Benutzer zuerst etwas in die Box eingeben. Dankbar für Hilfe, um die JSON-Datei am Anfang mit der Seite laden zu lassen.Loading selectize.js Optionen mit jquery

countries.json

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

index.html

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

Quelle

2017-12-31 geotheory

Eine gute Seele in einem IRC-Kanal hat mich zu dieser Lösung zeigt, das gut zu funktionieren scheint:

$.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, 
    }); 
    } 
});

Quelle

2017-12-31 23:31:43 geotheory

Loading selectize.js Optionen mit jquery

Antwort

Verwandte Themen