-1

So I have a 'form search' function script that I am trying to apply to items within a container. I have found this from a tutorial online that someone used to search members of teaching staff. only I am looking to apply this to my div classes:

$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
    var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
    $('div.dress-container .bold').each(function(){
         var $this = $(this);
         if($this.text().toLowerCase().indexOf(query) === -1)
             $this.closest('div.dress-container').fadeOut();
        else $this.closest('div.dress-container').fadeIn();
    });
});

Here is the jsfiddle - I was trying to pull the image and text using the JS and class but it would not work:

http://jsfiddle.net/lmac1/x6kv91qk/

Can anyone point me in the right direction? I was using this JQuery hide all divs except for the divs I search for

Community
  • 1
  • 1
L Mac
  • 32
  • 5
  • 1
    Please upload the code to jsfiddle.net – Ryan Dec 01 '15 at 19:51
  • can you look at it there ryan? – L Mac Dec 01 '15 at 20:03
  • If you upload the relevant HTML and JS code to http://jsfiddle.net/, we will be able to take a look at your problem and help you find a solution – Ryan Dec 01 '15 at 20:12
  • no problem Ryan - I will do that I just messaged you via social media as I got your twitter on your profile - if js fiddle is the handiest that is great. When I post it do i just put the link on here for you? – L Mac Dec 01 '15 at 20:15
  • Hi Ryan - There is some code on fiddle http://jsfiddle.net/lmac1/x6kv91qk/ The css is basic for the web page at present - I am going to be using this as a shopping cart using json - just adding a few features for starters – L Mac Dec 01 '15 at 20:22

1 Answers1

0

The problem is that your <div class="dress-container"> is currently wrapping all of your products, therefore you keep on hiding all of them once you use the searchbar.

I fixed your html markup here and removed the <div class="row"> so they line up nicely when you have filtered them: http://jsfiddle.net/j7c4kdy3/3/

Ryan
  • 2,167
  • 2
  • 28
  • 33
  • Brilliant Ryan works perfectly! Thank you for looking at this, great help, big thumbs up! – L Mac Dec 01 '15 at 22:52