Hiding text when initializing search

[Trotmeister]

Hello.

First of all, thanks for the kickass plugin, it's exactly what I needed. There's one thing I'm struggling to figure out, though. I've got a table of contents on my page, and I'd like to hide it during the search. I tried "ignore" attribute, but since hidden mode is off, it does the exact opposite of what I need.

[vdw]

Hi, you want to hide the results that match the search term? Is that correct?

[Trotmeister]

Not quite. I want to hide a block of text (a table of contents, to be specific) whenever people start typing in the search term. Whatever they type, the text in question should remain hidden. Is it possible to do?

[vdw]

Please provide me with an example of real code - a jsfiddle if you wish.

[Trotmeister]

Here's the page in question - http://dynam.is/faq2/ I want to hide the paragraph with Test 1, Test 2, etc. as soon as search is initialized. Right now the paragraph will show up if, say, "T" or "Test" is entered in search.

[vdw]

If you only want to hide the paragraph on keypress then just trigger the _after event and call a function that hides the element:

$('#search').on("_after", function() {
  $('.hide_me').hide(); // where .hide_me is the class of the paragraph
});

If you need to restore the paragraph's visibility when the user clears the input data then use a custom code:

$("#search").keyup(function() {
    // Show paragraph if there is no value at input
    if (!this.value) $('.hide_me').show();
});

e.g. https://jsfiddle.net/dkrestos/p8rwddvL/

[Trotmeister]

Sorry, I'm a bit of a neophyte here, what do I do with the custom code? Should I insert it in the plugin hideseek.js?

[vdw]

No, just include a .js file with the following code:

$(document).ready(function() {

    $('#search').on("_after", function() {
        $('.hide_me').hide(); // where .hide_me is the class of the paragraph
    });

    $("#search").keyup(function() {
        // Show paragraph if there is no value at input
        if (!this.value) $('.hide_me').show();
    });

});

in your page:

<script src="my_custom_scripts.js"></script>

as you do with the main.js file.

[Trotmeister]

Works like a charm, thank you very much!

[ovaxi]

if I have a main layout where searchbar is placed and that is extending in many views , how can i use this plugin ?