[英]Select2 in search form
我需要使用Select2構建搜索表單,但是在使其正常工作時遇到了問題。
用戶將搜索詞輸入到通過AJAX填充建議的字段中。 單擊建議將其帶到頁面。 否則,他需要單擊“提交”按鈕/或按Enter鍵以進入擴展搜索。 最后一點(單擊提交按鈕)不起作用。
<form action="/search" method="get" class="form-search" id="global_search_form">
<div class="input">
<input type="text" name="q" class="search-query" id="global_search" placeholder="Enter search term ...">
<button type="submit" class="btn">Search</button>
</div>
</form>
<script type="text/javascript">
jQuery("#global_search").select2({
placeholder: "Enter search term ...",
minimumInputLength: 2,
multiple: 1,
containerCssClass: 'search-query',
ajax: {
url: 'remoteGlobalSearch',
dataType: 'jsonp',
quietMillis: 100,
data: function (term, page) {
return {
q: term,
per_page: 10,
page: page
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.items,
more: more
};
}
},
formatResult: itemFormatResult,
formatSelection: itemFormatSelection,
escapeMarkup: function (m) {
return m;
}
});
function itemFormatResult(item) {
var markup = '<table class="item-result"><tr>';
if (item.image !== undefined) {
markup += '<td class="item-image"><img src="' + item.image + '" /></td>';
}
markup += '<td class="item-info"><div class="item-type">' + item.type_string + '</div>';
markup += '<div class="item-title">' + item.title + '</div>';
markup += '<div class="item-description">' + item.description + '</div>';
markup += '</td></tr></table>';
return markup;
}
function itemFormatSelection(item) {
location.href = item.url;
}
</script>
干杯
我認為button
, type=submit
以及各種瀏覽器如何解釋它存在兼容性問題。 您是否嘗試過使用
<input type="submit" value="Search">
而不是按鈕標簽?
或者,如果您確實需要使用button標簽,那么我建議您使用以下內容:
<button type="button" class="btn" onclick="this.form.submit()">Search</button>
這解決了您的問題嗎? 干杯!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.