Display a div based on particular input text across various strings

How can I enhance this Jquery code to display a button when the input value matches a certain string on keyup event? I have two questions regarding this:

Fiddle

$("#test").keyup(function () {
    $("#yeah").css("display", this.value == "test" ? "block" : "none");
});

The issue I'm facing is:

Type test = good

Type test here = nothing

I want the display to remain visible regardless of how the string is placed, as long as it contains the specified word.

For example: I want to do some tests - should still show the button

Also, how can I make it work for multiple strings? For instance, displaying the button for test1 and test2?

javascriptjqueryhtmlcss

Answer №1

Utilize a regular expression:

$("#test").keyup(function() {
  $("#yeah").toggle(/test|something/.test(this.value));
});
#yeah {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="test">
<div id="yeah">
  Yeah!
</div>

This particular regular expression will detect any occurrence of test or something.

Answer №2

Below is a solution that addresses both of your inquiries.


$('input[name=amount]').on('keyup', function() {
    var userInput = $(this).val();
    var keyword1 = 'keyword';
    var keyword2 = 'phrase';

    if (userInput.includes(keyword1) || userInput.includes(keyword2)) {
        $('#response').show();
    } else {
        $('#response').hide();
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the move_uploaded_file function in PHP?

I have been actively studying PHP and am currently working on a CMS project. I have encountered an issue with image uploading. PHP if ( $_POST['img']) $uploads_dir = '/images'; $tmp_name = $_FILES["img"]["tmp_name"]; $name = $_FIL ...

phphtmlmysqlfile-upload

The IBM Bluemix platform running Node.js and websockets appears to frequently terminate connections on the client side

Despite my server code not initiating any closures, the websocket connections of my node clients within IBM Bluemix keep getting closed. This is how my server-side code looks: app.ws('/problemUpdate', function(ws, req) { // removing oldest ...

javascriptnode.jswebsocketibm-cloud

Questions regarding the flow-model in relation to svg

My code is as follows: body { background-color: black; } .root { background-color: aqua; } .svg-container { background-color: lightgray; } svg { background-color: red; } .btn { background-color: yellow; } .svg-container, .btn { display: inline-bloc ...

htmlcssbuttonsvg

Upon the second visit, Bootstrap popover functions as expected

After creating a website on SharePoint using Bootstrap and populating the content with JavaScript, I encountered an issue with popover functionality. Oddly enough, the popover only works after refreshing or reloading the page with F5. Strangely, popovers ...

javascriptsharepointbootstrap-4popper.js

The swipe function of Hammer.js is unable to detect gestures on a rotated iframe

After creating a rotated iframe on the page using CSS transforms, I attempted to implement swipe events within the iframe. body.rotate iframe { transform: rotate(90deg); transform-origin: top right; position: absolute; t ...

javascripthtmlcssiframehammer.js

What is the best way to prevent a dropdown menu in bootstrap CSS from displaying to the right?

I am currently implementing bootstrap 4.0 on my website. The dropdown menu is positioned at the top right corner of the screen. However, when a user clicks on the dropdown menu, it causes the page to expand slightly to the right, resulting in white space n ...

htmlcssbootstrap-4

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

javascripthtmlangularjsangularjs-ng-repeat

How to implement an Angular Animation that is customizable with an @Input() parameter?

Have you ever wondered if it's possible to integrate custom parameters into an Angular animation by passing them through a function, and then proceed to use the resulting animation in a component? To exemplify this concept, consider this demo where t ...

javascriptangulartypescriptanimationangular-animations

Save the data retrieved from the success callback of a jQuery.ajax() request to be

Currently in my project, I am attempting to retrieve data from a PHP script. Most AJAX callback functions I have researched show examples where they "use" the data directly in the callback function itself. However, I am looking to fetch data and store it i ...

phpjavascriptjqueryajax

Different ways to split up information on the client side into separate "pages"

Looking for a way to split a lengthy HTML text-only article into multiple divs for easier page navigation on mobile devices? Perhaps dividing it into separate pages that users can swipe through on their iPad or iPhone? I've experimented with JavaScri ...

javascript

Upon clicking a button on a JSP page, it triggers the ready function in JavaScript. This action may lead to

I have a button placed in my JSP file. <button id="btnViewAll">View All</button> Whenever this button is clicked, I expect the viewAllInventory() function in my JavaScript to be called. function viewAllInventory() { $.ajax({ url : "/Grad ...

javascriptjqueryajaxjspspring-mvc

developing a function within a loop using an index

To create an object in a for loop and add a click function that calls another function while passing the index of the clicked object, you can use the following loop: var markers = []; for (x = 0; x < response.data.length; x++) { var ret = { ...

javascriptangularjsangular-google-maps

How can I reset the DefaultValue of my Autocomplete input field after submitting?

Is there a way to reset the default value of my <TextField> inside Autocomplete after form submission? Even after submitting the form, the state of formValues remains as the default value. What can I do to fix this issue? I've attempted to mod ...

javascriptreactjsmaterial-uireact-hook-form

Customized Grafana dashboard with scripted elements

I'm running into an issue while using grafana with graphite data. When I attempt to parse the data, I encounter an error due to the server not providing a JSON response. I am experimenting with scripted dashboards and utilizing the script found here: ...

javascriptjsongraphitegrafana

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

Encountering Server Error 500 while trying to deploy NodeJS Express application on GCP App Engine

My goal is to deploy a NodeJS app on gcloud that hosts my express api. Whenever I run npm start locally, I receive the following message: >npm start > [email protected] start E:\My_Project\My_API > node index.js Running API on por ...

javascriptnode.jsexpress

Generate a PHP array by iterating through an array of HTML input values using a for loop

I've been attempting to generate an array that includes the values of inputs within loops. As a newcomer to PHP, I have searched through various other questions without success. The process involves selecting a random number "$QuestionNoSelect" and re ...

phphtmlmysqlarraysforms

Display the scrollbar only when the mouse cursor hovers over it

Is there a way to make a scrollable list show the scrollbar only on hover, while still allowing users to scroll with just one touch on mobile browsers like iOS and Android? I want it to behave as if the list always has overflow-y: auto. I've tried usi ...

javascriptjqueryhtmlcssscroll

My Jquery code seems to break after the second form submission. Could it be related to Django, Ajax, or Jquery?

I have a toggle button that allows users to follow or unfollow. The jQuery is working on the first submit, but when I toggle the button again, the elements don't change. html {% for user in followers %} <div class="flist" id="fl ...

htmljquerydjangoajax

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

javascriptpythonhtmlpython-3.xselenium