how do I filter by a substring in HTML?

Question

I have the following function:

var $content = $("#content");
var $map= $("#map");
$.each(plots, function() {
    var plot = this;
    var $plot = $("<a />")
   .css({
        'width': plot.width,
        'height': plot.height,
        'top': plot.top,
        'left': plot.left,
        'background': plot.color,
    })
    .hover(function() {
        $content.html(plot.content);
    });
    $map.append($plot);
});

I want to plot the .css part (which plots a square) only if plot.content contains a substring from a <input type=text name=filter> which appears in some form in other part of the HTML. how could I do that?

in addition, I want to have a button that reruns/redraws all of the rectangles. what function do I need to run? it is just that I don't know much about this language, I am used to Javascript.

Answer 1

Not sure if this is what you want:

var plot = this;
var filter = $('input[name=filter]').val(); // get the value to search for

if(plot.content.indexOf(filter) >= 0) { //check whether it is in plot.content
   var $plot = $("<a />")
   .css({
        'width': plot.width,
        'height': plot.height,
        'top': plot.top,
        'left': plot.left,
        'background': plot.color,
    })
    .hover(function() {
        $content.html(plot.content);
    });
    $map.append($plot);
}