自动完成 jQuery 插件不起作用，声称变量未定义 [重复]答案

【问题标题】：Autocomplete jQuery plugin not working, claiming a variable is undefined [duplicate]自动完成 jQuery 插件不起作用，声称变量未定义 [重复]
【发布时间】：2012-01-04 04:40:40
【问题描述】：

可能重复：
jQuery variable claiming it's undefined when it has been defined

问题是，当在 firefox 中打开它并为 input 1 输入一个值并选择它时，firebug 说变量 phone 未定义。我尝试在开始时定义变量，但它仍然停止工作。

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

这是 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>

我正在使用这个插件来自动完成http://www.pengoworks.com/workshop/jquery/autocomplete.htm

【问题讨论】：

尝试将 var 声明移到 $(document).ready 函数之外。
@Fosco 不，还是同样的错误。
使用自动完成而不是 autocompleteArray...
您应该做的一件事是删除选项列表末尾的逗号； selectFirst:true, 是设置的最后一个属性，因此逗号在技术上使 Javascript 无效，并且可能会产生副作用，具体取决于您使用的浏览器及其设置。
我应该提到，当输入这两个值时，它应该会显示相关的 div。自动完成现在正在工作，但它仍然没有显示 div。这是我输入第一个值时遇到的错误。 cl.ly/3u0h082G1G2I2k281Q07

标签： javascript jquery forms jquery-plugins autocomplete

【解决方案1】：

问题出在你的findFirmware()函数中，把它改成

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

$(phoneid+firmware).show 这一行有两个问题，如果算上缺少的括号和分号，则有四个问题，但是...

您尝试显示的 div 有一个 ID，您的选择器中没有 # 来按 ID 选择元素
firmware 包含带有句点的未解析字符串，因此当您的 div ID 为 iphone2g12 时，phoneid + firmware 变为 iphone2g1.2，因此您需要使用解析它的 firmwareid。

小提琴演示：http://jsfiddle.net/AaNWM/

【讨论】：

我爱你。感谢您（以及其他所有帮助过我的人）。
没问题，你应该关闭/删除你的另一个question 虽然它几乎是这个的副本......我已经继续并在其中发布了相同的答案以防万一你无法删除/删除它，因此您可以将其标记为正确，以便那些可能遇到该问题而不是这个问题的人也能得到答案。

【解决方案2】：

它未定义，因为你这样做：

li.selectPhone;

传入的li 元素中不存在哪个.selectPhone。因此，一旦您开始替换字符串，就会出现错误。

假设我可能会认为我可能知道您要做什么，我将li.selectPhone 和li.selectFirmware 更改为li.innerHTML，它工作正常。 jsFiddle.

编辑：您还在固件功能中使用了phone.replace，所以我在上面的小提琴中也进行了更改。

【讨论】：

谢谢，但它似乎仍然没有显示相应的div。

【解决方案3】：

phone 未定义，因为 li.selectPhone 未定义。

如果没有看到 autoCompleteArray() 乍一看似乎不是 jQuery 自动完成插件的一部分，很难猜出为什么会丢失？

【讨论】：

autocompleteArray() 是插件的一部分，它是主调用的包装器。线493：jQuery.fn.autocompleteArray = function(data, options) { return this.autocomplete(null, options, data); }