Spring + bootstrap + bootstrap tags + typeahead + multiple datasets -

-

i trying build spring app using bootstrap search input field using bootstrap tags , typeahead multiple datasets. right able single datasets , looks : single dataset input field tags

but want have multpile datasets: multiple datasets input field (multiple datasets example typeahead.js/examples/ )

of course want work tags showed single dataset. if use code above example multiple datasets doesn't work. @ moment have working code single dataset tags, code below:

hello.jsp 

<!doctype html>  <html>      <head>      	<!-- bootstrap css-->  		<link rel="stylesheet" href="resources/new/bootstrap-3.3.2/dist/css/bootstrap.min.css">  		  		<!--tags input css-->  		<link rel="stylesheet" href="resources/new/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">  	</head>  	<body>  		<div>  			<input type="text" name="city" id="city" placeholder="city name">  		</div>  	  		<!--jquery js-->  		<script src="resources/new/jquery/jquery-1.11.2.min.js"></script>  		  		<!--bootstrap js-->  		<script src="resources/new/bootstrap-3.3.2/dist/js/bootstrap.min.js"></script>  		  		<!--typeahead js-->  		<script src="resources/new/typeahead/bootstrap-typeahead.js"></script>  		  		<!--tags input js-->  		<script src="resources/new/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>  		  		<!--custom js-->  		<script src="resources/new/custom.js"></script>  	</body>  </html>

custom.js

/**   *    */      var states = ['alabama', 'alaska', 'arizona', 'arkansas', 'california',    'colorado', 'connecticut', 'delaware', 'florida', 'georgia', 'hawaii',    'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana',    'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota',    'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire',    'new jersey', 'new mexico', 'new york', 'north carolina', 'north dakota',    'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island',    'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont',    'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming'  ];      var miasta = ['wroclaw','poznan','gdynia'];    (function($) {      $(function() {          $(document).ready(function() {              //init tags input              $('#city').tagsinput({                  minlength: 0,                  hint: true,                  highlight: true,                  typeahead: {                  	source: states,                  }              });          });      });  })(jquery);

like can see in hello.jsp file using :

  • jquery 1.11.2
  • bootstrap 3.3.2
  • typeahead 2.3.2
  • bootstrap-tagsinput v0.5.0

do have idea how can connect above bootstrap tags typeahead mutliple datasets ? suppose used wrong version of bootstrap tags or typeahead or else , cause of problem. if yes please me versions compatibile? or how ?

you'll have add different sets of data in array inside typeahead property of tagsinput initializer object, this:

var states = ['alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado', 'connecticut', 'delaware', 'florida', 'georgia', 'hawaii',   'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana',   'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota',   'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire',   'new jersey', 'new mexico', 'new york', 'north carolina', 'north dakota',   'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island',   'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont',   'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming' ];   var miasta = ['wroclaw','poznan','gdynia'];  (function($) {     $(function() {         $(document).ready(function() {             //init tags input             $('#city').tagsinput({                 typeahead: [{                     minlength: 1,                     hint: false,                     highlight: true                 },[{                     source: states                 }, {                     source: miasta                 }]]             });         });     }); })(jquery);

note properties put in code snippet properties of 1 of elements of typeahead array, not property of tagsinput object. note how different sources encapsulated in own object, , each of these objects part of array, element of typeahead array. it's bit confusing, that's how tagsinput library integrates typeahead one.


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more