Search with JQuery Autocomplete
*** and this is searching the underlying nodes!!! study this for ICD-10 ***
HTML
<script src="http://d3js.org/d3.v2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input id="tags"></input>
<div id="mysvg"></div>
JavaScript
var w = 4000,
h = 2000;
var nodes= [
{
value: "jquery",
label: "jQuery",
x: "520px",
y:"1000px"
},
{
value: "jquery-ui",
label: "jQuery UI",
x:"1500px",
y:"500px"
},
{
value: "sizzlejs",
label: "Sizzle JS",
x:"2000px",
y:"700px"
}
];
var force = d3.layout;
var zoomFactor = 4, zoom = d3.behavior.zoom();
var vis = d3.select("#mysvg")
.append("svg:svg")
.attr("width", "400px")
.attr("height", "200px")
.attr("id","svg")
.attr("pointer-events", "all")
.attr("viewBox","0 0 "+w+" "+h)
.attr("perserveAspectRatio","xMinYMid")
.append('svg:g')
.call(zoom.on("zoom", redraw))
.append('svg:g');
function redraw() {
trans=d3.event.translate;
scale=d3.event.scale;
vis.attr("transform",
"translate(" + trans + ")"
+ " scale(" + scale + ")");
};
var nodeEnter = vis.selectAll("g.node").data(nodes, function(d){return d.value}).enter().append("g");
nodeEnter.append("circle")
.attr("id", function(d){return "circle-node-"+ d.value})
.attr("fill","white")
.attr("cx", function(d){return d.x})
.attr("cy", function(d){return d.y})
.attr("r","200px")
.attr("stroke", "black")
.attr("stroke-width","2px");
nodeEnter.append("title")
.text(function(d){return d.label});
$(function() {
$( "#tags" ).autocomplete({
source: nodes,
select: function( event, ui){
vis.selectAll("#circle-node-"+ui.item.value).transition().attr("fill", "red");
var transx = (-parseInt(vis.select("#circle-node-"+ui.item.value).attr("cx"))*zoomFactor + w/2),
transy = (-parseInt(vis.select("#circle-node-"+ui.item.value).attr("cy"))*zoomFactor...