I am using the GitHub example of selectize that I have modified to retrieve json from my own server.
http://brianreavis.github.io/selectize.js/
For this example I have skipped the db call and am just forcing back some set data. The select box does not get populated with the json that is returned by the php script and I can't figure out why.
json response:
$result['users'] = array(
array(
'id'=>1,
'first_name'=>"Sherd",
'last_name'=>"Jerrod",
'email'=>"[email protected]"
),
array(
'id'=>2,
'first_name'=>"Ned",
'last_name'=>"Wolf",
'email'=>"[email protected]"
),
);
$json = json_encode($result, JSON_PRETTY_PRINT);
echo $json;
Select box:
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Loading + Custom Scoring</h2>
<p>This demo shows how to integrate third-party data and override the scoring method.</p>
<div class="control-group">
<label for="select-repo">Repository:</label>
<select id="select-repo" class="repositories" placeholder="Pick a repository..."></select>
</div>
<script>
$('#select-repo').selectize({
valueField: 'url',
labelField: 'name',
searchField: 'name',
options: [],
create: false,
render: {
option: function(item, escape) {
return '<div>'+ item.first_name +'</div>';
}
},
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {
return score(item) * (1 + Math.min(item.watchers / 100, 1));
};
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'http://localhost/random/return.php?q=' + encodeURIComponent(query),
type: 'GET',
dataType: 'json',
error: function() {
callback();
},
success: function(res) {
callback(res.users);
}
});
}
});
</script>
</div>
</div>
</body>
</html>
From the API's I guess
selectizeusesarrayas source. But what you are recieving is aJSONresponse. Try converting it into aarrayand tryYou could map the array onto an array of objects, like this:
Then you can use "labelField" and "valueField" to specify the value: