Question

I have the following code and what I am trying to do is set up an Autocomplete input box that when it is filled out, create another autocomplete input box underneath it.

• The problem with my code is that
  since I am using blur, it will create
  a new input every time I click off of
  the first one.

• The second problem is
  that I need to setup the autocomplete
  on the newly created input box, but
  if I do it recursively then it will
  crash.

Code:

function setupAutoComplete()
{
 var autoCompleteData = $("#listContacts").html().split("<br>");
 //autoCompleteData = replaceAll(autoCompleteData, "&lt;", "<");
 //autoCompleteData = replaceAll(autoCompleteData, "&gt;", ">");
 $("[name|=toemail[]]").autocomplete(autoCompleteData);
 $("[name|=toemail[]]").result(function(event, item) {
    $("[name|=toemail[]]").blur();
 });
 $("[name|=toemail[]]").blur(function(){
  var newString = $(this).val();
  newString = replaceAll(newString, "&lt;", "<");
  newString = replaceAll(newString, "&gt;", ">"); 
  $(this).val(newString);
  var newfield = '<p><label class="" disabled="true"><select name="toSelect[]"><option>To: </option><option>CC: </option><option>BCC: </option></select></label><input type="text" value="" name="toemail[]" /></p>';
  $("#composeTo").append(newfield);
 });
}

Answer 1

Posting my own solution.

function setupAutoComplete()
{
    var autoCompleteData = $("#listContacts").html().split("<br>");


$("[name|=toemail[]]").each(function(key, value) {
    if (!($(this).hasClass("blurred")))
    {
    $(this).autocomplete(autoCompleteData);
    $(this).result(function(event, item) {
        var newString = $(this).val();
        newString = replaceAll(newString, "&lt;", "<");
        newString = replaceAll(newString, "&gt;", ">"); 
        $(this).val(newString);
        $(this).blur();
    });
    $(this).blur(function(){
        if (!($(this).hasClass("blurred")))
        {
        var newfield = '<p><label class="" disabled="true"><select name="toSelect[]"><option>To: </option><option>CC: </option><option>BCC: </option></select></label><input type="text" value="" name="toemail[]" /></p>';
        $("#composeTo").append(newfield);
        setupAutoComplete();
        $(this).addClass("blurred");
        }
    });
    }
});