D3 Autocomplete change div to input box

Question

I'm wanting to change the source code of an auto-completer that I found on the D3 site.

Click here for link

I basically want to turn the <div id="test" style="width:100%; height:100%;"></div> code into a html form input box so when you click on the autocompleted item it will process a "submit" type request.

Thanks

Answer 1

If I understood the question and what you want to do, you can replace the div with input using JavaScript by doing something like this :

var toReplace = document.getElementById('test'); //element to be replaced
var parent = toReplace.parentNode;

var input = document.createElement('input'); // new element
input.id = input.name = "test";
input.type = 'text';
// can declare more attributes for input here

parent.replaceChild(input, toReplace);  // Replacing here..

jsFiddle