Question

我尝试使用带有搜索输入字段的bootstrap使用bootstrap标记和typeahead但使用多个数据集来构建Spring应用程序。现在我可以使用单个数据集来完成它，它看起来像： single dataset input field with tags

但我希望有一个多重数据集： multiple datasets input field （来自typeahead.js / examples /的多个数据集示例）

当然我希望这与我为单个数据集显示的标签一起使用。但是，如果我只使用上面示例中的代码来处理多个数据集，则它不起作用。目前，我已经为带有标签的单个数据集编写了代码，代码如下：

的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);

就像你在hello.jsp文件中看到的那样我使用：

jQuery 1.11.2
Bootstrap 3.3.2
Typeahead 2.3.2
bootstrap-tagsinput v0.5.0

您是否知道我如何将带有Typeahead的Bootstrap标签与多个数据集连接起来？我想我可能使用了错误版本的bootstrap标签或typeahead或其他东西，这就是问题的原因。如果是的话，请你说我哪些版本兼容？或者怎么做？

Answer 1

You'll have to add the different sets of data in an array inside the typeahead property of the tagsinput initializer object, like 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 that the properties you put in your code snippet are properties of one of the elements of the typeahead array, not a property of the tagsinput object. Also note how the different sources are encapsulated in its own object, and each of these objects are part of an array, which is an element of the typeahead array. It's a bit confusing, but that's how the tagsinput library integrates the typeahead one.

Spring + bootstrap + bootstrap标签+ typeahead +多个数据集

1 个答案: