Отменить функцию, если поле ввода ввода пусто - PullRequest
Новая
       3

Отменить функцию, если поле ввода ввода пусто

0 голосов
/ 17 января 2020

У меня есть этот код: 

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"); if (input.value.trim (). length) {

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

}

Ответы [ 3 ]

0 голосов
/ 17 января 2020

Сэр, вы хотите изменить заполнитель поля поиска, если ввод пуст?

также лучше изменить <input type="search", если вы хотите использовать onsearch="" в вашем searchinput

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>
0 голосов
/ 17 января 2020

Есть много способов go об этом. Одним из способов может быть проверка поля ввода при отправке формы. Кажется, это то, к чему вы стремились.

Подход, который я использовал, заключается в том, чтобы поместить поле <input> в элемент <form> и вызвать функцию checkForm, чтобы убедиться, что она не пуста, если она не пустой, вы можете вызвать вашу buscar функцию там.

Вот рабочий пример

0 голосов
/ 17 января 2020

Таким образом, вы хотите просто изменить атрибут 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>
...