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
Post a Comment