typeahead.js - Retrieve value from tagsinput with typeahead -


i'm stumped. first input eg x y z demonstrates pulling values tagsinput. second input eg alaska using typeahead. third combines them eg belgium on clicking button can't values in countryselection input. ideas?
in advance.

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <!-- bootstrap -->     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>     <!-- jquery -->     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>     <!-- tagsinput -->     <link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">     <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>     <!-- typeahead -->     <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> </head>  <body>     <div class="container">          <!-- tagging section -->         <div id="tagging" class="row">             <div class="form-group">                 <div class="col-sm-2">                     <label for="usertags">manual tags:</label>                 </div>                 <div class="col-sm-10">                     <input type="text" id="usertags" data-role="tagsinput" class="form-control" />                     <button type="button" class="btn btn-success pull-right"                             onclick="alert($('#usertags').tagsinput('items'));">show tags</button>                 </div>             </div>         </div>           <!-- typeahead works not 'tagged' -->         <div id="tagone" class="row">             <div class="form-group" id="exampleone">                 <div class="col-sm-2">                     <label for="stateselection">typeahead only:</label>                 </div>                 <div class="col-sm-10">                     <input id="stateselection" type="text" class="form-control typeahead" />                     <button type="button" class="btn btn-success pull-right"                             onclick="alert($('#stateselection').val());">show tags</button>                 </div>             </div>         </div>         <script>             var states = ['alabama', 'alaska', 'arizona'];             var mystates = new bloodhound({                 datumtokenizer: bloodhound.tokenizers.whitespace,                 querytokenizer: bloodhound.tokenizers.whitespace,                 local: states             });             mystates.initialize();              $('#exampleone .typeahead').typeahead({                 hint: true,                 highlight: true,                 minlength: 1             },                 {                     name: 'states',                     source: mystates                 });                     </script>           <!-- typeahead works , 'tagged' cannot retrieve items -->         <div id="tagtwo" class="row">             <div class="form-group">                 <div class="col-sm-2">                     <label for="countryselection">typeahead tags:</label>                 </div>                 <div class="col-sm-10">                     <div id="exampletwo">                         <input type="text" id="countryselection" data-role="tagsinput" class="form-control" />                     </div>                     <button type="button" class="btn btn-success pull-right"                             onclick="alert($('#countryselection').tagsinput('items'));">show tags</button>                 </div>             </div>         </div>         <script>             var countries = ['belgium', 'finland', 'new zealand'];             var mycountries = new bloodhound({                 datumtokenizer: bloodhound.tokenizers.whitespace,                 querytokenizer: bloodhound.tokenizers.whitespace,                 local: countries             });             mycountries.initialize();              $('#exampletwo').tagsinput({                 typeaheadjs: ({                     hint: true,                     highlight: true,                     minlength: 1,                     name: 'countries',                     source: mycountries                 })             });         </script>      </div> </body> </html> 

figured out ... using wrong id. changed appropriate code to

alert($('#exampletwo').tagsinput('items')) 

and good. cheers


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -