使用typehead(RunningCoder)时，无法输出多搜索中的所有值

Question

我花了几个小时试图弄清楚在使用multiselect时使用"RunningCoder"typeahead插件时如何从输入框中提取值。

我可以很容易地获得一个值(框中的最后一个(，但无法获得所有值。为了获得单个值，我使用下面的代码。它为框中的值创建一个全局变量(cuisineType(。

callback: {
onClick: function (node, a, item, event) {
window.cuisineType = item.cuisineOption
},
}

根据建议的onSubmit代码，我认为这样的东西可能会起作用。但事实并非如此！

callback: {
onClick: function (node, form, items, event) {
window.cuisineType = JSON.stringify(items)
},
}

我的输入框没有单独的"提交"按钮。

如何从多搜索中获取所有值并将其输出

提前感谢！

这是我的代码的JSFiddle。

HTML

<form>
<div class="questionDiv">
<label for="searchCusineInput">Question 1</label>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query" id="searchCusineContainer">
<input id="searchCusine" class="searchBox" name="hockey_v2[query]" type="search" placeholder="Cusine Search" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="questionDiv">
<label for="searchRegionInput">Question 2</label>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query" id="searchRegionContainer">
<input id="searchRegionInput" class="searchBox" name="hockey_v2[query]" type="search" placeholder="Region Search" autocomplete="off">
</div>
</div>
</div>
</div>
<button type="button" class="submitWelcomeForm" value='Submit'>Submit</button>
<div class="resultA"></div>
<div class="resultB"></div>
</form>
<div class="demo"></div>

jQuery

$(document).on('click', '.submitWelcomeForm', function () {
$(".resultA").text(cuisineTypeA)
$(".resultB").text(TypeB)
});
typeof $.typeahead === 'function' && $.typeahead({
input: '#searchCusine',
minLength: 1,
maxItem: 8,
order: "asc",
hint: true,
searchOnFocus: true,
blurOnTab: false,
cancelButton: false,
multiselect: {
limit: 10,
limitTemplate: 'Select 10 cuisines or less!',
cancelOnBackspace: true,
cancelButton: false,
},
templateValue: "{{cuisineType}}",
display: ["cuisineType"],
emptyTemplate: 'No results for {{query}}',
source: {
data: [
"Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
"Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
"Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
"Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
"Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
"Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
"Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti"
]
},
callback: {
onClick: function (node, form, item, event) {
$(".demo").text(item.cuisineType + ' Added!')
window.cuisineTypeA = item.cuisineType
},
}
});
typeof $.typeahead === 'function' && $.typeahead({
input: '#searchRegionInput',
minLength: 1,
maxItem: 8,
order: "asc",
hint: true,
searchOnFocus: true,
blurOnTab: false,
cancelButton: false,
multiselect: {
limit: 10,
limitTemplate: 'Select 10 cuisines or less!',
cancelOnBackspace: true,
cancelButton: false,
},
templateValue: "{{cuisineTypeA}}",
display: ["cuisineTypeA"],
emptyTemplate: 'No results for {{query}}',
source: {
data: [
"Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
"Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
"Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
"Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
"Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
"Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
"Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti"
]
},
callback: {
onClick: function (node, form, item, event) {
$(".demo").text(item.cuisineTypeA + ' Added!')
window.TypeB = item.cuisineTypeA
},
}
});

CSS

.typeahead__container, .submitWelcomeForm {margin: 5px}
.typeahead__container {width: 50%}

Answer 1

因为已经17天了，我会抛出我唯一的线索。

https://github.com/running-coder/jquery-typeahead/issues/397#issuecomment-381190370

这是我最接近弄清楚的一次。这就是一个人所说的，他这样做是为了让它在正常提交时提交。

我在每个多选字段中添加了一个并行的隐藏输入字段，以便在表单提交时像本地表单一样处理选择：

我遇到了同样的问题，也在努力解决。也许是追加？

编辑：

我用了一个这样的版本将标签添加到一个隐藏的字段中，然后通过一个正常的表单而不发出

callback: {
onClick: function (node, form, item, event) {
var input = $("#hidden_field");
// this is my default for empty to make it easy as I am newb!
// if it is empty, just throw in the selection
if (input.val() === "0"){
input.val(item.cuisineTypeA);
// if not empty, append to what is already in there
}else{
input.val(input.val() + "," + item.cuisineTypeA);
}
},
}