jqueryui: "TypeError: this.menu.element is undefined"

Question

我正在尝试使用 JavaScript 中创建的输入制作一个 jquery-ui 自动完成小部件，如下所示：

function drawAutocomplete() {
    var fooBox = document.createElement("input");
    fooBox.id = "foobox";
    fooBox.name = "foobox";

    window.document.firstChild.appendChild(fooBox);

    $("#foobox").autocomplete({source: ["eenie", "meenie"]});
}

但我一直收到

TypeError: this.menu.element is undefined

每当我尝试与框交互时，没有显示自动完成选项。

这样动态创建的item不能使用吗？我还有什么误解？

Answer 1

使用jQuery的简单方法：

function drawAutocomplete() {
    // used body, since I'm not sure what element you're reffering to
    $('<input type="text" id="foobox" name="foobox">').appendTo('body')
    // don't search the DOM for '#foobox', use created element:
    .autocomplete({source: ["eenie", "meenie"]});
}

DEMO

或者使用您的代码，将 fooBox HTML 元素包装到 jQuery 对象中。

function drawAutocomplete() {
   var fooBox = document.createElement("input");
   fooBox.id = "foobox";
   fooBox.name = "foobox";
   // used body, since I'm not sure what element you're reffering to
   document.body.appendChild(fooBox);
   $(fooBox).autocomplete({source: ["eenie", "meenie"]});
}

无论哪种方式，您都不必在 DOM 中搜索 '#foobox'，因为您已经在此处缓存了元素：var fooBox（第二个示例）或 $('<input ...>')（第一个例子）。

DEMO

Answer 2

您的元素未正确添加到页面：

window.document.firstChild.appendChild(fooBox);

将尝试将数据附加到 doctype（或 HTML）标签。

使用

window.document.body.appendChild(fooBox);

所以你的动态代码没问题（纯 JS 和 jQuery 的奇怪混合），但是一旦你将 input 添加到正确的元素，应该可以正常工作。 @phillip100 的回答向您展示了一个很好的优化方法。

演示：

$(document).ready(
function drawAutocomplete() {
    var fooBox = document.createElement("input");
    fooBox.id = "foobox";
    fooBox.name = "foobox";

    document.body.appendChild(fooBox);

    $("#foobox").autocomplete({source: ["eenie", "meenie"]});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

jqueryui: "TypeError: this.menu.element is undefined"

jqueryui: "TypeError: this.menu.element is undefined"

javascript

jquery

jquery-ui