|
|
## Παράδειγμα προσθήκης έξτρα ελέγχου : remote Selectbox πχ github
|
|
|
### Οδηγίες
|
|
|
> **Σενάριο:** Έχετε δημιουργήσει ήδη μια φόρμα και έχετε ένα πεδίο στο οποίο θέλετε να να γίνει dropdown και να γεμίζει αυτόματα από εξωτερικό server. Ο παρακάτω κώδικας θα φορτώσει από εξωτερικό server το script selectize.js.
|
|
|
|
|
|
1. Πρέπει να βρειτε το όνομα του πεδίου (id=...) μέσω της επιλογής **view-source** του browser πχ στην δική μας περίπτωση είναι edit-submitted-text01 . ***(1)**
|
|
|
2. Βάλτε ένα νέο πεδίο τύπου **Markup** **ΜΕΤΑ** το πεδίο κειμένου που έχετε φτιάξει για το ΑΦΜ .
|
|
|
3. βάλτε **Μορφότυπο κειμένου : Full HTML**
|
|
|
4. προσθεστε τον παρακάτω κώδικα στο value :
|
|
|
|
|
|
```javascript
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
|
|
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css">
|
|
|
|
|
|
<script>
|
|
|
jQuery(document).ready(function($) {
|
|
|
$('#edit-submitted-text01').selectize({
|
|
|
valueField: 'url',
|
|
|
labelField: 'name',
|
|
|
searchField: 'name',
|
|
|
create: false,
|
|
|
render: {
|
|
|
option: function(item, escape) {
|
|
|
return '<div>' +
|
|
|
'<span class="title">' +
|
|
|
'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
|
|
|
'<span class="by">' + escape(item.username) + '</span>' +
|
|
|
'</span>' +
|
|
|
'<span class="description">' + escape(item.description) + '</span>' +
|
|
|
'<ul class="meta">' +
|
|
|
(item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
|
|
|
'<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
|
|
|
'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
|
|
|
'</ul>' +
|
|
|
'</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: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
|
|
|
type: 'GET',
|
|
|
error: function() {
|
|
|
callback();
|
|
|
},
|
|
|
success: function(res) {
|
|
|
callback(res.repositories.slice(0, 10));
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}); // END of jQuery(document).ready(function($) {
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
5. Εκτελούμε δοκιμές στην φόρμα μας (κατά προτίμηση σε πιο παλιά και αργά PC) για να σιγουρευτούμε ότι η φόρμα μας συμπεριφέρεται όπως επιθυμούμε.
|
|
|
|
|
|
##### Με αυτόν τον κώδικα θα ξεκινάτε να γράφετε το όνομα ενός script και θα τραβάει τα αντιστοιχα repositories απο το github. |
|
|
\ No newline at end of file |