jquery autocomplete input array

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);
 });
}

mat-mcloughlin · Accepted Answer · 2010-02-16 16:00:36Z

1

Rather than setting up the auto complete on the elements as a group you should be doing it individually as each one is created. This will stop the recursion.

Secondly to avoid the onblur event firing when you click somewhere else on the screen you should catch the tab key being pressed on a keypress.

answered Feb 16, 2010 at 16:00

mat-mcloughlin

6,79213 gold badges50 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gazler · Accepted Answer · 2010-02-16 16:30:11Z

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");
        }
    });
    }
});

Collectives™ on Stack Overflow

jquery autocomplete input array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related