linked dynamic remote search dropdown POST issues
linked dynamic remote search dropdown POST issues
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.js"></script>
<p>
This form uses GET
</p>
<div class="motscles_add">
<select name="skills" multiple="" class="ui search fluid dropdown "></select>
</div>
CSS
body {
margin: 10px;
}
JavaScript
$('.motscles_add .ui.dropdown')
.dropdown({
apiSettings: {
// this url parses query server side and returns filtered results
url: '//api.semantic-ui.com/tags/{query}',
beforeSend: function(settings) {
var first = $('.ui.dropdown.first').dropdown('get value');
settings.urlData.letter = first;
console.log( settings.urlData.letter);
return settings;
}
},
filterRemoteData : true
})
;
console.log('value');
$.fn.dropdown.settings.forceSelection = false;
$('.ui.dropdown.second').dropdown({
apiSettings: {
url: '//api.semantic-ui.com/tags/',
beforeSend: function(settings) {
var first = $('.ui.dropdown.first').dropdown('get value');
console.log('value',first);
settings.urlData.letter = first;
return settings;
}
},
filterRemoteData : true
});
$('.ui.dropdown.first').dropdown({
onChange: function(value, text, $choice){
$('.ui.dropdown.second').dropdown('clear');
//2.2.8 bug doesn't clear search value
$('.ui.dropdown.second').find('.search').val('');
}
});
$('.ui.dropdown.fourth').dropdown({
apiSettings: {
method : 'POST',
url: '//api.semantic-ui.com/tags/b',
beforeSend: function(settings) {
var letter = $('.ui.dropdown.third').dropdown('get value');
console.log('value',letter);
settings.data = { 'query' : letter };
return settings;
}
},
filterRemoteData : true
});
$('.ui.dropdown.third').dropdown({
onChange: function(value, text, $choice){
$('.ui.dropdown.fourth').dropdown('clear');
//2.2.8 bug doesn't clear search value
$('.ui.dropdown.fourth').find('.search').val('');
}
});