Question

I’m trying to have two autofilling textboxes, one for a phone model – input1 and one for firmware – input2 on the same page. When both filled I want a div to be shown with the ID input1input2, but when entering a value in input1 it claims the variable for phone is undefined, and when filling in the second it claims phoneid is undefined.
Here’s the HTML

<div id="formcontainer">
<input id="input1"/>
<input id="input2"/>
</div>
<div id="iphone2g1.1" class="info" style="display:none">iPhone 2G</div>
<div id="iphone2g1.2" class="info" style="display:none">iPhone 3G</div>
<div id="iphone2g1.3" class="info" style="display:none">iPhone 3GS</div>
<div id="iphone2g1.4" class="info" style="display:none">iPhone 4</div>
<div id="iphone2g1.5" class="info" style="display:none">iPhone 4S</div>

jQuery

$("#input1").autocompleteArray(["iPhone 2G","iPhone 3G","iPhone 3GS","iPhone 4","iPhone 4s"],
    {   minChars:1,
        matchSubset:1,
        onItemSelect:selectPhone,
        onFindValue:findPhone,
        autoFill:true,
        maxItemsToShow:10,
        selectFirst:true,
    });

$("#input2").autocompleteArray(["1.1","1.2","1.3","1.4","1.5"],
{   minChars:1,
    matchSubset:1,
    onItemSelect:selectFirmware,
    onFindValue:findFirmware,
    autoFill:true,
    maxItemsToShow:10,
    selectFirst:true,
    });

function findPhone(li) {
    if( li == null ) return alert("No match!");
    var phone = li.selectPhone;
    var phoneid = phone.replace("iPhone ","iphone").toLowerCase();
};

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    var firmware = li.selectFirmware;
    $(".info").hide
    $(phoneid+firmware).show
};

function selectPhone(li) {
    findPhone(li);
}

function selectFirmware(li) {
    findFirmware(li);
}

I’m using this for the autocomplete plugin.
The page can be viewed here.

Thanks.

EDIT1 This is now what the jQuery looks like, but it still throws up the same error.

    var phone;
    var phoneid;
    var firmware;
    var firmwareid;

$("#input1").autocompleteArray(["iPhone 2G","iPhone 3G","iPhone 3GS","iPhone 4","iPhone 4s"],
{   minChars:1,
    matchSubset:1,
    onItemSelect:selectPhone,
    onFindValue:findPhone,
    autoFill:true,
    maxItemsToShow:10,
    selectFirst:true,
});

$("#input2").autocompleteArray(["1.1","1.2","1.3","1.4","1.5"],
{   minChars:1,
    matchSubset:1,
    onItemSelect:selectFirmware,
    onFindValue:findFirmware,
    autoFill:true,
    maxItemsToShow:10,
    selectFirst:true,
    });



function findPhone(li) {
    if( li == null ) return alert("No match!");
    phone = li.selectPhone;
    phoneid = phone.replace("iPhone ","iphone").toLowerCase();
};

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    firmware = li.selectFirmware;
    firmwareid = phone.replace(".","");
    $(".info").hide
    $(phoneid+firmware).show
};

function selectPhone(li) {
    findPhone(li);
}

function selectFirmware(li) {
    findFirmware(li);
}

Answer 1

The problem is the periods in your div’s ID attributes and in your findFirmware() function, change it to

function findFirmware(li) {
    if( li == null ) return alert("No match!");
    firmware = li.selectFirmware;
    firmwareid = phone.replace(".","");
    $(".info").hide();
    $('#' + phoneid + firmwareid).show(); // This line was messed up
};

There two problems with this line $(phoneid+firmware).show, well four if you count the missing parenthesis and semicolon but…

1. The div your trying to show has an ID, you don’t have # in your selector to select the element by ID
2. firmware contains the unparsed string with the period so phoneid + firmware becomes iphone2g1.2 when your div ID is iphone2g12 thus you needed to use firmwareid in which you parsed it out of.

Fiddle Demo: http://jsfiddle.net/AaNWM/