所以，我有一些問題。我有一個搜索欄來搜索產品，如果我輸入的單詞與pageKeywords陣列值匹配，還可以重定向到另一個頁面。所以在 1 個搜索欄中可以有 2 個觸發器。
第一個是當我點擊搜索關鍵字并且匹配時它會導致另一個頁面：
$('#submitForm').on("click",function(e){
pageKeywords($("#searchKeywords").val(),e)
})
如果所寫的單詞不包含，也將定向到結果頁面pageKeyword：
$('#submitForm').on('click', function () {
console.log("another function submit")
$('#fform').submit()
return false;
});
我遇到的問題是，當我單擊“搜索”時，它會觸發表單提交。當搜索欄中輸入的單詞與 匹配時，如何防止表單提交pageKeywords？如果不匹配，則表單提交可以運行。這兩個事件是不能有爭議的，這里我舉一個我做??的代碼的例子
您可以嘗試輸入，輸入后點擊回車，如果匹配pageKeywords就不會重新加載，不匹配則重新加載。我如何讓我的按鈕也像這樣作業？
function pageKeywords(searchValue,evt){
const pageKeywords = {
"home": "/homepage",
"about": "/about-us"
}
const getInputVal = searchValue;
if(pageKeywords[getInputVal]) {
evt.preventDefault();
console.log(pageKeywords[getInputVal])
return false;
}else{
console.log('not found')
}
}
$(document).ready(function() {
$('#submitForm').on("click",function(e){
pageKeywords($("#searchKeywords").val(),e)
})
$('#submitForm').on('click', function () {
console.log("another function submit")
$('#fform').submit()
return false;
});
$("#searchKeywords").on("keypress", function(e) {
if (e.which === 13) {
pageKeywords($(this).val(),e)
}
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="fform" action="#">
<input type="text" id="searchKeywords">
<button id="submitForm">Search</button>
</form>uj5u.com熱心網友回復：
如果我正確理解了您的問題，您基本上希望根據搜索詞是否與您的pageKeywords物件中的某些內容匹配來采取不同的操作。
您不需要為此創建兩個偵聽器。只需收聽在回車時觸發的表單提交事件。然后，您可以匹配該值并在該術語匹配與否時對條件采取行動。
const pageKeywords = {
"home": "/homepage",
"about": "/about-us"
}
$('#fform').on('submit', function(e){
const searchTerm = $('#searchKeywords').val();
if(searchTerm in pageKeywords){
e.preventDefault();
alert('term found');
} else {
alert('No match');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="fform" action="#">
<input type="text" id="searchKeywords">
<button id="submitForm">Search</button>
</form>這是我的意見，但如果我必須這樣做，我不會這樣做。我會將所有這些邏輯保留在服務器端。
uj5u.com熱心網友回復：
您正在用另一個函式呼叫覆寫一個函式呼叫 - JavaScript 不支持函式多載。將它們的邏輯組合成一個通用的函式：
$('#submitForm').on("click",function(e) {
if (pageKeywords($("#searchKeywords").val(), e) !== false) {
console.log("another function submit");
$('#fform').submit();
} else {
e.preventDefault();
return false;
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/385080.html
標籤：javascript html 查询