Очистить ввод - это выбрать изменения

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь очистить ввод, если пользователь нажимает на один из вариантов.

Сейчас происходит то, что отфильтрованный текст не очищается, поэтому нажатие на поле параметров не имеет никакого эффекта.

Что я хотел бы сделать, так это то, что при выборе опции фильтр поиска и поле ввода должны быть очищены, чтобы пользователь мог получить выбранный идентификатор опции без фильтрации.

Я надеюсь, что я объяснил это достаточно ясно, я уверен, что это решение действительно простое. Заранее спасибо

 $(document).ready(function() {
  $("#idfilteronly").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filteronly> *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>Choose a topic to read</p>
<select onchange="location = this.options[this.selectedIndex].value;">
  <option value=#topic1>Topic 1</option>
  <option value=#topic1>Topic 2</option>
  <option value=#topic1>Topic 3</option>
</select>

<input id="idfilteronly" maxlength="25" type="text" placeholder="Filter Only..">
<div id="filteronly">
  <p id="topic1">This is This is This is This is This is This is This is This is This is This is This is </p>
  <p id="topic2">just some just some just some just some just some just some just some just some just some </p>
  <p id="topic3">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text </p>
</div>

Развернуть фрагмент

Ответ №1:

Просто установите onchange событие на свое select , затем очистите вводимый текст и запустите keyup , чтобы сбросить поиск при выборе изменения :

смотрите фрагмент ниже :

 $(document).ready(function() {
  $("select#select").on("change", function() {
    
    // dont know why using below line ?!
    location = this.options[this.selectedIndex].value;


    $("#idfilteronly").val("");
    $("#idfilteronly").trigger("keyup")
  });
  
  $("#idfilteronly").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filteronly> *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

 <html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <p>Choose a topic to read</p>
  <select id="select" onchange="location = this.options[this.selectedIndex].value;">
    <option value=#topic1>Topic 1</option>
    <option value=#topic1>Topic 2</option>
    <option value=#topic1>Topic 3</option>
  </select>

  <input id="idfilteronly" maxlength="25" type="text" placeholder="Filter Only..">
  <div id="filteronly">
    <p id="topic1">This is This is This is This is This is This is This is This is This is This is This is </p>
    <p id="topic2">just some just some just some just some just some just some just some just some just some </p>
    <p id="topic3">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text </p>
  </div>


</body>

Развернуть фрагмент

Ответ №2:

 <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="document">
<p>Choose a topic to read</p>
<select id="option" onchange="location = this.options[this.selectedIndex].value;">
<option value =#topic1>Topic 1</option>
<option value =#topic1>Topic 2</option>
<option value =#topic1>Topic 3</option>
</select>

<input id="idfilteronly" maxlength="25" type="text" placeholder="Filter Only.."> 
<div id="filteronly">
<p id="topic1">This is This is This is This is This is This is This is This is This is This is This is </p>
<p id="topic2">just some just some just some just some just some just some just some just some just some </p>
<p id="topic3">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text </p>
</div>
</div>
<script>
 $(document).ready(function(){
 var divClone = $("#document").clone();
 $("#option").on("change", function() {
 $("#idfilteronly").val('');
 $("#document").replaceWith(divClone.clone());
  });
 $("#idfilteronly").on("keyup", function() {
 var value = $(this).val().toLowerCase();
 $("#filteronly> *").filter(function() {
 $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
 });
 });
 
});
</script> 
 
</body>
</html>

Развернуть фрагмент