Autocomplete jQuery plugin not working, claiming a variable is undefined

Question

Possible Duplicate:
jQuery variable claiming it's undefined when it has been defined

The problem is that when opening it in firefox and typing a value for input 1 and selecting it, firebug says that the variable phone isn't defined. I tried defining the variables at the start but it still ceased to work.

This is the jQuery:

$(document).ready(function() {

var phone;  //fix scoping
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);
}
    });

And this is the HTML:

<div id="formcontainer">
        <input id="input1"/>
        <input id="input2"/>
</div>
<div id="iphone2g11" class="info" style="display:none">iPhone 2G</div>
<div id="iphone2g12" class="info" style="display:none">iPhone 3G</div>
<div id="iphone2g13" class="info" style="display:none">iPhone 3GS</div>
<div id="iphone2g14" class="info" style="display:none">iPhone 4</div>
<div id="iphone2g15" class="info" style="display:none">iPhone 4S</div>

I'm using this plugin for autocomplete http://www.pengoworks.com/workshop/jquery/autocomplete.htm

try moving the var declarations outside of the $(document).ready function. — Fosco, Nov 22 '11 at 19:52
One thing you should do is remove the comma at the end of your option list; `selectFirst:true,` is the last property being set so the comma technically makes the Javascript invalid and could have side affects depending on what browser your using and its settings. — Jeff Wilbert, Nov 22 '11 at 19:57
I should've mentioned that when the two values have been entered it should reveal the relating div.The autocomplete is working now but it still doesn't reveal the div. This is the error I get when entering the first value. http://cl.ly/3u0h082G1G2I2k281Q07 — Supertod, Nov 22 '11 at 20:04
Just to add on to my other comment about the extra comma, there's multiple other things here you should fix up in your syntax. **1.)** move your custom functions above the `autocompleteArray()` calls so that the functions are actually defined before being used. **2.)** `hide`/`show` are methods so you should have the parentheses `hide()`/`show()` and **3.)** you don't have a semicolon at the end of your `hide`/`show` calls... — Jeff Wilbert, Nov 22 '11 at 20:07

Chad · Answer 1 · 2011-11-22T20:07:35.183

2

Its undefined because you do:

li.selectPhone;

Which .selectPhone doesn't exist on the li element passed in. So, once you get to replacing the string, you get an error.

Assuming that I may, possibly, think, that I might know what you are trying to do, I changed li.selectPhone and li.selectFirmware to li.innerHTML and it works fine. jsFiddle.

Edit: You also were using phone.replace in your firmware function so I changed that as well in the above fiddle.

edited Nov 22 '11 at 20:07

answered Nov 22 '11 at 20:00

Chad

19,219
4
50
73

Thanks, but it still doesn't seem to reveal the corresponding div. – Supertod Nov 22 '11 at 20:15

Jeff Wilbert · Accepted Answer · 2011-11-22T20:30:29.980

2

The problem is 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...

The div your trying to show has an ID, you don't have # 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/

edited Nov 22 '11 at 20:30

answered Nov 22 '11 at 20:18

Jeff Wilbert

4,400
1
20
35

I love you. Thank you (and everyone else) who have helped me. – Supertod Nov 22 '11 at 20:27
No problem, you should close/delete your other [question](http://stackoverflow.com/questions/8198374/jquery-variable-claiming-its-undefined-when-it-has-been-defined) though as it's a duplicate of this one pretty much... I've gone ahead and posted the same answer in it just in case you can't remove/delete it so you can mark it correct so those who might come across that question instead of this one get the answer also. – Jeff Wilbert Nov 22 '11 at 20:37

score 1 · Answer 3 · answered Nov 22 '11 at 20:02

1

phone is undefined because li.selectPhone is undefined.

It's hard to guess why that's missing without seeing autoCompleteArray(), which doesn't seem to be part of the jQuery autocomplete plugin, at first glance?

answered Nov 22 '11 at 20:02

Kato

40,352
6
119
149

1

`autocompleteArray()` is a part of the plugin, it is a wrapper around the main call. Line `493`: `jQuery.fn.autocompleteArray = function(data, options) { return this.autocomplete(null, options, data); } ` – Chad Nov 22 '11 at 20:05

Autocomplete jQuery plugin not working, claiming a variable is undefined

3 Answers3