时间戳

首页 > 解决方案 > 如果输入搜索框为空，则取消功能

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

问题描述

我有这个代码：

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=""以警告没有引入搜索的文本？如果没有，请继续使用脚本进行搜索。

谢谢

代码更新到此。工作但返回 false 不会停止脚本：

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

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;
}

}

标签： javascriptsearch-box

解决方案

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

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

这是一个工作示例

推荐阅读