如果输入搜索框为空，则取消功能

Question

我有这个代码：

function buscar() {
var input, filter, table, tr, td, i;
input = document.getElementById("searchinput");
filter = accent_fold(input.value).toUpperCase();
table = document.getElementById("CSVTable");
tr = table.getElementsByTagName("tr");
var matching = false;
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        if (accent_fold(td.innerHTML).toUpperCase().indexOf(filter) > -1) {
            matching = true;
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

if (matching) {
    $('#CSVTable').css('display', 'block');
    $('#no-results').css('display', 'none');
} else {
    $('#CSVTable').css('display', 'none');
    $('#no-results').css('display', 'block');
}

}

与此链接

        <div id="buscador">
        <input type="text" id="searchinput" onsearch="buscar()" placeholder="Cercar per cognom"/>
        <span class="buscador-btn">
            <button class="btns" type="submit" id="searchbutton" onclick="buscar(); showDiv();">
                <span style="font-size: 15px; color: White;">
                    <i class="fa fa-search"></i>
                </span><b>Cercar</b>
            </button>
            <button class="btnc" onclick="document.getElementById('searchinput').value = '' ; hideDiv();">
                <span style="font-size: 15px; color: Red;">
                    <i class="fa fa-times"></i>
                </span><b>Esborrar</b>
            </button>
        </span>
    </div>

如何实现一个脚本，如果在单击搜索按钮并且搜索输入为空时更改它自己的 placeholder="" 以警告没有引入搜索的文本？如果没有，继续脚本搜索。

谢谢

为此更新了代码。工作但 return false 不会停止脚本：

var 输入 = document.getElementById("searchinput"); 如果（input.value.trim（）。长度）{

var input, filter, table, tr, td, i;
input = document.getElementById("searchinput");
filter = accent_fold(input.value).toUpperCase();
table = document.getElementById("CSVTable");
tr = table.getElementsByTagName("tr");
var matching = false;
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        if (accent_fold(td.innerHTML).toUpperCase().indexOf(filter) > -1) {
            matching = true;
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}

if (matching) {
    $('#CSVTable').css('display', 'block');
    $('#no-results').css('display', 'none');
} else {
    $('#CSVTable').css('display', 'none');
    $('#no-results').css('display', 'block');
}

}else{
input.placeholder="vacío";
return false;
}

}

Answer 1

因此，如果验证失败，您只想更改 placeholder 属性。

因为 jquery 是 $(your selector).attr("placeholder", "Type name here..");

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "" || x == null) {
   document.getElementById("searchbox").placeholder = "Type name here..";
    return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post" required>
  Name: <input type="text" name="fname" id="searchbox">
  <input type="submit" value="Submit">
</form>

</body>
</html>

Answer 2

先生，如果输入为空，您想更改搜索框的占位符吗？

如果您想在 searchinput

中使用 onsearch=""，最好更改 <input type="search"

function validateSearchbox() {
  var input = document.getElementById("searchinput");
  if(input.value.trim().length){
   // the search-box is not empty
    // run buscar...
   buscar();
  }else{
   // search-box is empty
   console.log("no input");
    // change place holder to empty or change it to anything you like
    input.placeholder=""; 
  }
}

function buscar() {
 console.log("buscar running");
  // insert buscar code here
}

<div id="buscador">
  <input type="search" id="searchinput" onsearch="validateSearchbox()" placeholder="Cercar per cognom"/>
  <span class="buscador-btn">
    <button class="btns" type="submit" id="searchbutton" onclick="validateSearchbox()">
      <span style="font-size: 15px; color: White;">
        <i class="fa fa-search"></i>
      </span><b>Cercar</b>
    </button>
  </span>
</div>

Answer 3

有很多方法可以解决这个问题。一种方法是在提交表单时验证输入字段。这似乎是你想要的。

我使用的方法是将 <input> 字段放在 <form> 元素中并调用函数 checkForm 来验证它是否为空，如果它不为空则可以调用你的 buscar 功能在那里。

Here's a working example

如果输入搜索框为空，则取消功能

Cancel function if input search-box is empty

javascript

search-box