我遇到一个问题,我有一个下拉列表显示项目,当您选择一个项目时,它不会显示基于所选项目的表格。我有一个具有自动完成功能的搜索输入-可以,但是我无法使用下拉菜单。有谁知道如何使用jquery或仅使用普通javascript解决此问题?谢谢你的帮助。
这是我的代码
<select class="selectMenuSize" >
<option value="">select</option>
<c:forEach items="#{mybean.jobSearchItems}" var="searchItem">
<option value="#{searchItem.getSearchValue()}" id="searchInputField" name="searchInput">#{searchItem.toString()}</option>
</c:forEach>
</select>
jquery
$(function () {
var myData = [];
$.get("http://localhost:8080/myApp/JobSearchItem.xhtml", function (data) {
$.each(data, function (k, v) {
myData.push({
id: v.id,
label: v.label,
value: v.id,
});
});
});
$("#searchTextField").autocomplete({
minLength: 2,
source: myData
});
$('#searchForm').submit(function () {
$('#results').text($(this).serialize());
return true;
});
});
function handleSubmit(evt) {
evt.preventDefault();
let url = '#{request.contextPath}/index.xhtml';
let searchValue = document.getElementById('searchTextField').value;
let data = new FormData();
data.append('searchValue', searchValue);
fetch(url, {body: data, method: "post"})
.then(res => res.text())
.then(text => {
let doc = new DOMParser().parseFromString(text, 'text/html');
console.log(doc);
document.getElementById("results").appendChild(doc.body.firstElementChild);
});
document.getElementById('searchForm').onsubmit = handleSubmit;
}