[ANSWERED] javascript – Clear input is select changes

Question 1

Just set the onchange event to your select , then empty the input text and trigger keyup to reset search on the select change :

see below snippet :

$(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>

Question 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>

Question 3

I am trying to get the input cleared is a user clicks on one of the options.

What is happening now is that the filtered text does not clear therefore clicking on the option box has no effect.

What I would like to do is that when an option is selected then the search filter and the input box must be cleared so that the user can be taken the selected option id without the filtering.

I hope a I have explained it clearly enough, I am pretty sure this solution is really simple.
Thanks in advance

$(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>

Bollate

[ANSWERED] javascript – Clear input is select changes

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Bourbia Brahim

By

Related Post

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate