ui-select2 - Make adding a new tag appear at the bottom of the list -
the default in ui-select2 when adding new tag makes current text option appear on top of drop-down list.
for example, if wish type "english," item exists in list of options, type "eng," auto-suggested text "english" appears second on drop-down list, while "eng" appears first (i.e. add new tag "eng" instead of picking existing option "english").
this little problematic if wanted type "eng" , hit enter recommended option "english," have option of creating own tag not in list of existing options. best solution can think of put currently-typed text option ("eng") move bottom, , have list of recommended options (in case "english") appear first.
is there way in ui-select2? tried using createsearchchoiceposition follows try out:
createsearchchoice: function(term) { return {id: 3,text:term}; }, createsearchchoiceposition: 'top'
but didn't affect (even when change position 'bottom'). there other way or using createsearchchoiceposition incorrectly?
here can find possible solution:
$('.select2field').select2({ tags: null, createsearchchoice: function (term, data) { console.log('createsearchchoice'); console.log(data); return { id: -1, text: term, isnew: true }; }, createsearchchoiceposition: 'bottom', width: '300px', query: function (options) { console.log('query'); options.context = options.context || { }; if (options.page === 1 ) { var result = { results: [ {id: 0, text: 'english'}, {id: 1, text: 'spanish'}, {id: 2, text: 'chinese'} ], more: true }; options.callback(result); } else if (options.page === 2) { var result = { results: [ {id: 3, text: 'french'}, {id: 4, text: 'german'}, {id: 5, text: 'portugese'} ], more: false }; options.context.page = 2 options.callback(result); } } }) .on('select2-loaded', function(items) { console.log('select2-loaded'); console.log(items); }) .on('select2-selecting', function(e) { if (e.object.isnew) { alert("is new!"); } });
and jsfiddle example: jsfiddle example
as can see, results returned select2 control through "query" function, , emulates ajax call. puts new element @ bottom of first page (between chinese , french). normal behaviour of createsearchchoiceposition. hope helps.
Comments
Post a Comment