Question

我的代码中的自动完成功能无效。

以下是我的 HTML 代码：

<div class="form-group ui-widget">
   <label for="input" class="control-label font-12 font-blue">Enter your Area  <span class="req">*</span></label>
   <input class="form-control ui-autocomplete-input" required="required" placeholder="Enter your Area" name="register[pincode]" id="area">
</div>

JS

$(document).ready(function() {
    var areas = ["States", "Australia", "Indies"];
    $("#register[pincode]").autocomplete({
        source: areas
    });
});

此外，html代码被包含为模板，如果它有所不同，理想情况下我认为它不应该因为我将它包含在document.ready函数中。

包含脚本的顺序是 jquery.min.js ，然后是 jquery-ui.min.js ，然后是bootstrap。 jquery的版本是2.2.0

Answer 1

使用： $("#register[pincode]")您正在尝试引用name属性，就好像它是id一样。您的元素的ID为“area”。你需要使用：

$("#area").autocomplete({
    source:areas
});

Jquery id selector docs

如果你真的想使用你可以使用的名字：

$("input[name='register[pincode]']").autocomplete({
    source:areas
});

注意：不要忘记名称值周围的单引号，否则会抛出错误（至少它与值中的[]有关。）

Attribute selector docs

Answer 2

试试这个：

$( function() {
    var availableTags = ["States", "Australia", "Indies"]
    $( "#area" ).autocomplete({
      source: availableTags
    });
});

Working Fiddle

基本Jquery自动完成功能无法正常工作

2 个答案: