How to replace the Autocomplete options with new options?

Questions
1

Hi,
I am having a two Autocomplete elements on my page say:

  1. one for country(USA, india etc.)
  2. one for states(states in USA, states in India etc.)

I am populating the states Autocomplete with default USA states. What I am looking for is, if the user selects the option from the first Autocomplete(Say now user selects India) then I now want to populate the Second Autocomplete with the different states in India and not the states from USA which I had populated while creation of the second Auto complete.
I have tried different ways to achive it but failed miserably.

Would anyone please suggest how I can achive this?

Thanks in advance.

2

http://framework7.io/kitchen-sink/
open console:

app.root.append('<div class="view my-view"></div>').find('.view-main').hide();

var view=app.views.create('.my-view',{
  routes:[
    {
      path:'/my-path',
      content:'<div class="page">\
                 <div class="page-content">\
                   <div class="list">\
                     <ul>\
                      <li class="item-content item-input">\
                         <div class="item-inner">\
                           <div class="item-title item-label">vendor</div>\
                           <div class="item-input-wrap">\
                             <input type="text" id="vendors"/>\
                             <span class="input-clear-button"></span>\
                           </div>\
                         </div>\
                       </li>\
                       <li class="item-content item-input">\
                         <div class="item-inner">\
                           <div class="item-title item-label">car</div>\
                           <div class="item-input-wrap">\
                             <input type="text" id="cars"/>\
                           </div>\
                         </div>\
                       </li>\
                     </ul>\
                   </div>\
                 </div>\
               </div>',
      context:{
        vendors:['Japanese','German','American'],
        cars:{
          Japanese:['Honda','Lexus','Mazda','Nissan','Toyota'],
          German:['Audi','BMW','Mercedes','Volkswagen','Volvo'],
          American:['Cadillac','Chrysler','Dodge','Ford']
        }
      },
      renderResults:function(data,query,render){
        var results=[];
        for (var i=0;i<data.length;i++){
          if(data[i].toLowerCase().indexOf(query.toLowerCase())>=0) 
          results.push(data[i]);
        }
        render(results);
      },
      on:{
        pageInit:function(e,page){
          var context=page.route.route.context;
          var vendor=app.autocomplete.create({
            inputEl:'#vendors',openIn:'dropdown',
            on:{
              open:function(){
                car.$inputEl.attr('placeholder','').val('');
              }
            },
            source:function(query,render){
              var data=context.vendors;
              page.route.route.renderResults(data,query,render);
            }
          });
          var car=app.autocomplete.create({
            inputEl:'#cars',openIn:'dropdown',
            source:function(query,render){
              if(context.vendors.indexOf(vendor.$inputEl.val()) === -1){
                car.$inputEl.attr('placeholder','select vendor').val('');
                car.close();
                return;
              }
              var data=context.cars[vendor.value[0]];
              page.route.route.renderResults(data,query,render);
            }
          });
        }
      }
    }
  ]
}).router.navigate('/my-path',{animate:false});
1 Like