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);
}
It's probably a scoping problem. Try adding this to the top of your script:
var phone;
var phoneid;
The subsequently omit the var
phone = li.selectPhone;
It's not defined anywhere that's accessible to the findFirmware()
function--it's defined as a var
in findPhone()
, hence local to that function.
Not sure what is intended by things like li.selectFirmware
etc. but those will also break.
The problem is in the .
character in id.
Basically1, a name must begin with an underscore (_), a dash (-), or a letter(a–z), followed by any number of dashes, underscores, letters, or numbers. There is a catch: if the first character is a dash, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.
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...
#
in your selector to select the element by ID 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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.