Enrollment in the course is conditional on two words being a perfect match

Question

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align.

That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the classes: about, portfolio, and contact. The about container is visible while the other two are hidden.

What I'm trying to achieve is when I type certain words into a text box (or search box), such as "portfolio" or "portofoliu," and press enter, the about container will fade out and the portfolio container will fade in. The same effect should happen between about and contact.

I'm unsure how to implement this... Can anyone help? If you have a solution ready, providing a fiddle would greatly assist me in understanding how it functions.

Thank you

PS: One function that comes to mind is jQuery's .is() - comparing two elements. However, I'm not sure how to use it to compare with the text in the textbox.

I attempted the following code but it didn't work:

$("#portfolio").hide();
$("#wrong").hide();

$('#search').keyup(function() {
    if ($("#portfolio").is("#search")) {

    $("#portfolio").fadeIn();

}else{
    $("#wrong").fadeIn();
}
});

JSFIDDLE

javascript jquery css match

Answer 1

Answer №1

Experiment

hypertext markup language

<input id="search" type="text" />
<div id="content">
    <div id="about">about
        <br /><i>about content</i>
    </div>
    <div id="portfolio">portfolio
        <br /><i>portfolio content</i>
    </div>
    <div id="contact">contact
        <br /><i>contact content</i>
    </div>
</div>

javascript

var substringMatcher = function (strs, q, cb) {
    return (function (q, cb, name) {
        var matches, substrRegex;
        // an array that will be populated 
        // with substring matches
        matches = [];
        // regex used to determine if a string 
        // contains the substring `q`
        substrRegex = new RegExp(q, 'i');
        // iterate through the pool of strings 
        // and for any string that
        // contains the substring `q`, 
        // add it to the `matches` array
        $.each(strs, function (i, str) {
            $("#search").val("");
            if (substrRegex.test(str) 
               || q.slice(0, 1) === str.slice(0, 1)) {
                // the typeahead jQuery plugin 
                // expects suggestions to a
                // JavaScript object, refer to 
                // typeahead docs for more info        
                matches.push(name(str));
            }
        });
        cb(matches);
    }(q, cb, function (n) {
        return {
            "content": n
        }
    }));
};

var _matches = $.map($("#content div"), function (v, k) {
    return [v.id]
});

var template = {
    "content": _matches
};
$("#content div:gt(0)").hide(0);
$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13) {
        substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content).fadeIn(500).siblings().hide();
            search.val("");
        })
    }
});

link to jsfiddle http://jsfiddle.net/guest271314/2na7dyjf/

For further reference, visit typeahead.js - examples

Answer 2

Experiment

hypertext markup language

<input id="search" type="text" />
<div id="content">
    <div id="about">about
        <br /><i>about content</i>
    </div>
    <div id="portfolio">portfolio
        <br /><i>portfolio content</i>
    </div>
    <div id="contact">contact
        <br /><i>contact content</i>
    </div>
</div>

javascript

var substringMatcher = function (strs, q, cb) {
    return (function (q, cb, name) {
        var matches, substrRegex;
        // an array that will be populated 
        // with substring matches
        matches = [];
        // regex used to determine if a string 
        // contains the substring `q`
        substrRegex = new RegExp(q, 'i');
        // iterate through the pool of strings 
        // and for any string that
        // contains the substring `q`, 
        // add it to the `matches` array
        $.each(strs, function (i, str) {
            $("#search").val("");
            if (substrRegex.test(str) 
               || q.slice(0, 1) === str.slice(0, 1)) {
                // the typeahead jQuery plugin 
                // expects suggestions to a
                // JavaScript object, refer to 
                // typeahead docs for more info        
                matches.push(name(str));
            }
        });
        cb(matches);
    }(q, cb, function (n) {
        return {
            "content": n
        }
    }));
};

var _matches = $.map($("#content div"), function (v, k) {
    return [v.id]
});

var template = {
    "content": _matches
};
$("#content div:gt(0)").hide(0);
$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13) {
        substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content).fadeIn(500).siblings().hide();
            search.val("");
        })
    }
});

link to jsfiddle http://jsfiddle.net/guest271314/2na7dyjf/

For further reference, visit typeahead.js - examples

Answer 3

Answer №2

Check out this jsFiddle demo

To apply a hidden class to all your DIV elements, use the following code:

<div class="hidden" id="portfolio">Hello</div>
<div class="hidden" id="wrong">Not quite</div>

Now, try this script:

$(".hidden").hide();

var searchID = "";

$('#search').keyup(function( e ) {
    searchID = $.trim( this.value.toLowerCase() );
    if( searchID && e.which===13){
       $(".hidden").hide();
       $('[id='+  searchID  +']').show();
    }
});

Note: For case-insensitive targeting of the ID, add .toLowerCase() within the selector.

If you want to make the selection less stringent, explore other selectors like:

[id*=  Contains...
[id^=  Starts With...
[id$=  Ends With...

Answer 4

Check out this jsFiddle demo

To apply a hidden class to all your DIV elements, use the following code:

<div class="hidden" id="portfolio">Hello</div>
<div class="hidden" id="wrong">Not quite</div>

Now, try this script:

$(".hidden").hide();

var searchID = "";

$('#search').keyup(function( e ) {
    searchID = $.trim( this.value.toLowerCase() );
    if( searchID && e.which===13){
       $(".hidden").hide();
       $('[id='+  searchID  +']').show();
    }
});

Note: For case-insensitive targeting of the ID, add .toLowerCase() within the selector.

If you want to make the selection less stringent, explore other selectors like:

[id*=  Contains...
[id^=  Starts With...
[id$=  Ends With...

Enrollment in the course is conditional on two words being a perfect match

Answer №1

Answer №2

Similar questions

What is the best approach for selecting and organizing MongoDB records, as well as identifying the following record for retrieval?

When using jQuery and AJAX together, it seems that the POST method is returning

Tips for maintaining the original ng-click initialized value as the ng-init value after the page is refreshed

The issue at hand is that the headers cannot be redefined once they have already been sent

The case of the elusive Firefox overflow: hidden glitch

AWS Amplify-hosted Nuxt applications are resilient to errors during the build process

What is the best way to capture user input using an onClick event in JavaScript and then display it on the screen?

Can you explain the distinction between sockets and proxy passing in nginx compared to uwsgi?

Utilize setState in a ReactJS function within an if statement towards the end

Order the results by a predicate chosen by the user and a predefined secondary attribute

Is there a way to retrieve the text content of the element that has been clicked?

Webpack is throwing an error stating that it cannot find a module with the relative path specified

Troubleshooting Next.js server actions with ESLint error detection

What seems to be causing the malfunction in this ranking function?

Javascript Parameter

Angular's isteven-multi-select Component: A Versatile Selection Tool

Sending emails to multiple groups in Opencart can be easily achieved with the

What could be causing issues with the JQuery .Resize() function?

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

[ERROR_HTTP_HEADERS_ALREADY_SENT]: Headers can't be set once they have been sent to the client, expressjs