Filtering the d3 bubble chart as we type

Question

I am trying to filter the bubble chart as we type into a text box. With every keystroke that we type, the bubble chart should be updated with the nodes whose name value matches the expression typed so far.

This is what I am trying, but it doesn't seem to be working. Is there any other way of doing this?

var selectedVal = document.getElementById('autocompleteInput').value;
var regexp = new RegExp("^" + selectedVal.toLowerCase() + "\\w*");
var updatedData = feedsChart['children'].filter(function(obj){
         return regexp.test(obj['name'].toLowerCase());
                });
var newObj = {"children":updatedData,"name":"All Feeds"};
drawBubble(newObj); // This function redraws the entire bubble chart

Answer 1

I believe you need to tie the function that updates your chart to the onkeyup event. With jquery it might look like this

d3.select("#autocompleteInput").on("keyup", drawBubble);