I am working with a d3js bubble chart that contains multiple circles, each identified by an id corresponding to a city name.
var cities = ["Toronto", "London", "Paris"];
In addition, there is a standard input box in the HTML code.
<input id="searchBox" onchange="checkFilled()" />
The function checkFilled() is as follows:
function checkFilled() {
var inputVal = document.getElementById("searchBox").value;
var circleId = d3.select("#" + inputVal + "");
cities.forEach(function ( city ) {
if (inputVal == "") {
circleId.style("fill", "white");
}
else if ( inputVal == city ){
circleId.style("fill", "red");
}
})
}
Currently, this method works but has some drawbacks such as being case-sensitive, requiring hitting enter, and not reverting when text is removed.
My objective is to create a dynamic solution where the fill color changes as soon as text is added or removed, similar to the real-time sorting of an HTML table using Angular JS input shown in this example: http://jsfiddle.net/sravikiran/eBcaB/5/light/. This behavior should be applicable to SVG elements created by d3js or JavaScript code.