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

【问题标题】：Spring + bootstrap + bootstrap tags + typeahead + multiple datasetsSpring + bootstrap + bootstrap 标签 + typeahead + 多个数据集
【发布时间】：2015-10-27 15:12:33
【问题描述】：

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

但我想要多个数据集： multiple datasets input field （来自 typeahead.js/examples/ 的多个数据集示例）

当然，我希望它可以与我为单个数据集展示的标签一起使用。但是，如果我只是将上述示例中的代码用于多个数据集，则它不起作用。目前我有带有标签的单个数据集的工作代码，代码如下：

你好.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
引导程序 3.3.2
Typeahead 2.3.2
引导标签输入 v0.5.0

您知道如何将 Bootstrap 标签与 Typeahead 与多个数据集连接起来吗？我想我可能使用了错误版本的引导标签或预先输入或其他东西，这就是问题的原因。如果是，你能告诉我哪些版本是兼容的吗？或者怎么做？

【问题讨论】：

标签： spring twitter-bootstrap tags typeahead

【解决方案1】：

您必须在 tagsinput 初始化对象的 typeahead 属性内的数组中添加不同的数据集，如下所示：

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

请注意，您在代码 sn-p 中放置的属性是 typeahead 数组的元素之一的属性，而不是 tagsinput 对象的属性。还要注意不同的源是如何封装在它自己的对象中的，并且这些对象中的每一个都是数组的一部分，数组是预先输入数组的一个元素。这有点令人困惑，但这就是 tagsinput 库集成 typeahead 的方式。

【讨论】：