0

I created this example

As you can see, I separated the image in four quadrats using the area-tag.

The first quadrat has the data-name: abc, the second quadrat has the data-name: def,

The third quadrat has the data-name: ghi, the fourth quadrat has the data-name: jkl.

Moreover, there is an input for a search. What i want you to ask, if its possible to type anything in the input and look if the input matches one of the data-name´s.

Scenario:

I type an "a" in the input => Every area with an "a" at the beginning of its data-name should stay as it is, but other area´s should get an opacity of "1". Is this possible using the keyup-event? e.g. :

$(document).ready(function () {
    $("#searchfield").keyup(function() {
        var input = $.("#searchfield").val();
        $( "area[data-name^=' + input + ']" ).css( "opacity" , "1" );
    });
});

And how to make jquery searching for the html? i know how to do ajax etc.. but make jquery searching in the source code of website?

I followed this article, but there was no result:

Need your help

greetings

Sullivan Risk
  • 319
  • 1
  • 4
  • 21
user3185975
  • 19
  • 5
  • [contains](http://api.jquery.com/jquery.contains/) comes to mind – mplungjan Jan 12 '14 at 14:57
  • Using the `^` selector is a good idea, but you should re-write your jquery selector as `"area[data-name^='" + input + "']"` – tewathia Jan 12 '14 at 14:58
  • i corrected it: http://jsfiddle.net/fDavN/8429/ , but there is still no opacity on the first area, when i type an "a" in the input-field, could you refer to this? – user3185975 Jan 12 '14 at 15:05
  • Your `var input` definition has an error. Remove the period after `$` – tewathia Jan 12 '14 at 15:06
  • ok i removed the period: http://jsfiddle.net/fDavN/8432/ , there is no error now, but the css sill not working, maybe use a function? – user3185975 Jan 12 '14 at 15:07
  • It's working. Well, the css property is being applied when you type a or d or g or j, you can check the developer tools – tewathia Jan 12 '14 at 15:09
  • ehm, when i type an "a", the ubber left area should get an opacity, but i cant see anything :/ what do you mean "its working" ? – user3185975 Jan 12 '14 at 15:11
  • I mean the `area` with the `data-name=abc` attribute gets `opacity=1` applied to it when you type 'a' in the text field, but there is no visual effect. Apparently, the area tag is not a [visible element](http://stackoverflow.com/questions/1906734/visible-area-tag). – tewathia Jan 12 '14 at 15:16
  • ah ok now i understood your point.And how can i get e.g. a grayscale to the applied area, so there is a visual effect? tried this: http://jsfiddle.net/fDavN/8438/ , but grayscale not appearing on the area :/ you have an idea? – user3185975 Jan 12 '14 at 15:19
  • apply class to the area and style the class? – user3185975 Jan 12 '14 at 15:20

1 Answers1

0

input is variable, so you need to put it outside double quotes:

$( "area[data-name^='" + input + "']" ).css( "opacity" , "1" );

Also better use:

var input = $(this).val();
no1lov3sme
  • 682
  • 1
  • 5
  • 14