How to redraw a form with an input control?

[pgee70]

Hi i have information request relating to how to manage a form refresh, similar to #366 . I can get the ajax to read the data remotely, but unlike the example, I am using a text input tag to search for suburbs from postcodes. e.g.

i have tried a number of strategies, using <input data-data="{json}" ... and also adding an option to the selectize after instantiation. eg

var selectize = $("#input")[0].selectize;
selectize.addOption({'pc_id':pcValue,'pc_post_code':pcValue});
selectize.addItem(pcId);

this re-draws the form with the correct value, but the autocomplete afterwards seems broken -- the autocomplete does not refresh.

Semantically i think it would be best to give the input tag a value="7000" on refresh. On focus (after redraw), the autocomplete would fire again. How can i do that?

[brianreavis]

Can you post all of your code? I'm not totally following your question, but this will refresh the dropdown:

selectize.refreshOptions();

[pgee70]

Hi Brian thanks for replying an all of your work on this project.
I am converting my website from jqueryui to bootstrap. i used the selectmenu widget before. I have a core autocomplete routine that all my ajax autocompletes use, so i use lots of parameters. so the code is pretty long and I think it would obscure rather than highlight the problem.

for example with abridged code, selectizer settings:

 function autocomplete(o){
 .. loads of parameters/checking etc
 var ac = {
    valueField: o.returnVarValue,
    labelField: o.returnVarLabel,
    render: {
        option: function(item, escape) {
            var r;
            if (typeof(o.fn_render) == 'function'){
                r = o.fn_render(this,item,escape,ac);
            }
            else{
                r = item[o.returnVarLabel];
            }
            return r;
        }
    }
 }
 $(inputSelector).selectize(ac);

then in the calling function i:

 var ac_post_code = 
 {
      ...
      returnVarLabel: 'pc_post_code',
      returnVarValue: 'pc_id',  
      fn_render: function (that,item,escape,ac){
           return '<div class="clearfix" data-post-code="'+item['pc_post_code']+'">'+item['pc_suburb']+' <span class="text-muted">' + item['pc_state']+'</span></div>';
       }, …
 }
}
autocomplete(ac_post_code);

as i see it the problem is when i give the input tag a value of "7000"
$.fn.selectize = function(settings_user) :: init_textbox creates 'item' object with: option: Object pc_id: "7008" pc_post_code: "7008"

my custom render then can't find pc_post_code, pc_suburb, pc_state and gives the undefined label.

what i did to make it 'work' was to not give the input tag a value attribute, then create an object the custom renderer could use, and add that into the selectizer, then refresh the options

var selectize = $(ac_postcode.inputSelector)[0].selectize;
var pcId = $(ac_postcode.inputSelector).closest('.input-wrapper').find('input[name=cod_pc_id]').val();
var pcValue = $(ac_postcode.inputSelector).attr('data-value');
if (pcId && pcValue){
    var option = {};
    option['pc_id'] = pcId;
    option['pc_post_code'] = pcValue;
    option['pc_suburb'] = $(ac_postcode.inputSelector).closest('.input-wrapper').find('input[name=pc_suburb]').val();
    option['pc_state'] = $(ac_postcode.inputSelector).closest('.input-wrapper').find('input[name=pc_state]').val();
    selectize.addOption(option);
    selectize.addItem(pcId);
    selectize.refreshOptions(false);
}

on form refresh this gives: this is a bit hacky and does not have all the options, but for now it works. if selectizer init_textbox checked to see if an selectizer load function was present, and if so just added an item with no add option, it may get around this issue. that way focussing the input shouldshould fire the ajax search, finding the values again.

oh, could you consider adding to the documentation for 'searchField' 'this parameter is required for ajax loads.' and in load, the 'searchField' option is required with this option to load remote data. or similar. it would have saved me a few hours of tracing your code....

[posgarou]

@pgee70 Thank you so much for mentioning that the searchField is required and saving me those hours!

@brianreavis If you could clarify in the documentation that searchField is required for ajax that would be very helpful.

[pgee70]

Hi Brian Sorry but i have moved to select2. I just had too many problems integrating selectize into my project, and I have since wiped the selectize code.

What I wanted to do in this instance was to enter in the numeric postal code, and select the suburb/state, store the unique id, and display the suburb and state after selection in the disabled fields.

regards

Pete

On 1 Jul 2014, at 11:33 am, Brian Reavis notifications@github.com wrote:

Can you post all of your code? I'm not totally following your question, but this will refresh the dropdown:

selectize.refreshOptions(); — Reply to this email directly or view it on GitHub https://github.com/brianreavis/selectize.js/issues/495#issuecomment-47607793.