2

I'm having a problem with hiding repeated search results.

Here's an example:

Let's say I have a website where I sell cars. I let users search based on a couple of attributes, like brand, model,etc... and then I add all cars to the results. (User can make multiple searches)

I make a search for "Brand A" and I get result:

car-id-1
car-id-2
car-id-3
car-id-4
car-id-5

Now I make a new search for "Brand A" and "Model A", and I get repeated results:

car-id-1
car-id-2
car-id-3

I have my html like this:

<div class='car-id-1'></div>
<div class='car-id-1'></div> /*repeated*/
<div class='car-id-2'></div>
<div class='car-id-2'></div> /*repeated*/
<div class='car-id-3'></div>
<div class='car-id-3'></div> /*repeated*/
<div class='car-id-4'></div>
<div class='car-id-5'></div>

I need some selector so I can hide this repeated cars from my results.

I tried to use :first-of-type but I don't know how to make it all with one rule.

This would probably work:

.car-id-3:not(:first-of-type)

But id's come from database, so this is not a solution, because I can add new cars to db.

Is this even possible?

Humayun Shabbir
  • 2,961
  • 4
  • 20
  • 33
Ricardo Neves
  • 46
  • 8
  • 1
    That's exactly the moment when you should start think about using jQuery (JS) You'll have hard time to do it in pure CSS and even if you made it, just a change in HTML structure will again force you to use JS. So better start *now.* – Roko C. Buljan Aug 01 '14 at 00:30
  • 1
    You could generate dynamic styles based on the database ids, inserted in the page right before the html list in a ` – flochtililoch Aug 01 '14 at 00:32
  • Is there any wrapper where these div's are displayed in? – Danny van Holten Aug 01 '14 at 00:33
  • I already use js for other things, but I think it will make the page much slower... I thought using dynamic styles, but I ain't sure if it is the best way to accomplish this. Yes, all div's are in a wrapper.. – Ricardo Neves Aug 01 '14 at 00:38
  • 2
    You might want to reconsider how you fetch and display search results. Why can't you replace the search results, instead of appending them (therefore creating duplicated entries?). You can also fetch distinct car IDs from the database — basically, this filtering is best done on the server side whenever possible, or at least remove from the DOM with JS, and not rely on CSS to hide them instead. – Terry Aug 01 '14 at 00:40
  • 1
    In addition to @Terry, perhaps adding the key word `DISTINCT` to your database query might help. – Jon P Aug 01 '14 at 00:45
  • The problems is that this id's come from other websites. I mean, I parse some information from other webpages and show it to users. I can't replace the results because you can remove/edit previous searches, so it would probably remove this duplicate results sometimes when it was not supposed to, or probably the amount of js I would need to use would crash the browser. – Ricardo Neves Aug 01 '14 at 00:47
  • 1
    I suppose you are fetching data in JSON format from other websites? If that is the case, simply filter the JSON-encoded data by the car ID field for unique entries and only retrieve unique entries. Filtering for unique entries in JSON-encoded data has been addressed on SO previously — http://stackoverflow.com/questions/6680430/get-unique-results-from-json-array-using-jquery – Terry Aug 01 '14 at 00:51
  • Are you using any server side technologies or is this all javascript based? Most server side technologies will enable you create a web request to external resources and you can then parse the results server side. Also you say you "think" it will slow down the page too much. Have you actualy tried it? – Jon P Aug 01 '14 at 00:53
  • Yeah, my browser crashed... out of memory I think. – Ricardo Neves Aug 01 '14 at 01:02
  • @Terry that wouldn't work because user would make a request now and I make an ajax request, then 10 minutes later e wants to add a new search, so I make another ajax request and add results to the page. It's 2 different requests. – Ricardo Neves Aug 01 '14 at 01:06
  • 1
    Are you using API's for these other websites or are you scraping data from entire web pages? – Jon P Aug 01 '14 at 01:20
  • @user3897644 Then clear your results before fetching new search results, instead of appending them? – Terry Aug 01 '14 at 02:04

3 Answers3

0

You need to know those classes, so you can't go blind searching for a match.

I'd suggest you to push the class value, with php or whatever you're using as server side, into a <style> block and first display:none on the class itself, then display:block or whatever on the .class:fist-of-type.

You can do the same with js, by the way in any case you can't do it just with css alone.

phaberest
  • 3,140
  • 3
  • 32
  • 40
0

I tried to create each css rule for each result but the :first-of-type or :nth-child wouldn't work, because you can't filter using classe.Here's a link to clarify this:

css3 nth of type restricted to class

I'll try to change the way my results are appended to the page, since js wouldn't work for me...

Community
  • 1
  • 1
Ricardo Neves
  • 46
  • 8
0

the :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.

Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:

 .car-id-1, .car-id-2, .car-id-3, .car-id-4, .car-id-5 {
    display: none;
 }

 .car-id-1 ~ .car-id-1 ,
 .car-id-2 ~ .car-id-2 ,
 .car-id-3 ~ .car-id-3 ,
 .car-id-4 ~ .car-id-4 ,
 .car-id-5 ~ .car-id-5 {
    display: block;
 }

Check fiddle demo

Nerdroid
  • 13,398
  • 5
  • 58
  • 69