Javascript 无法与 jQuery UI 一起使用

Question

我在尝试让简单的 javascript 与 jQuery UI 一起工作时遇到了麻烦。我正在使用 jQuery UI 为一组表单输入元素提供自动完成功能，虽然工作效果令人满意，但我编写的 JavaScript 代码都不起作用。奇怪的是，当我注释掉所有 jQuery UI 内容并尝试运行我的 JavaScript 时，一切都完美运行!

jQuery UI 代码库中是否有某些内容覆盖了我使用自定义 JavaScript 函数的能力？

这是运行我的自动完成功能的脚本。

<script>

var fruits = ['Apples', 'Oranges', 'Bananas', 'Grapes'];

$(function() {
    $( ".input-box" ).autocomplete({
        source: availableTags
    });
  });


</script>

基本上，正如您所看到的，此代码在某些输入元素(带有类输入框)上运行自动完成，并且自动完成中的数据/列表项取自数组水果。

太棒了。这效果很好。

但是，现在我希望输入元素的值在失去焦点时附加到数组水果中。因此，基本上，您输入“Pineapples”，当您将焦点从输入框转移(使用 onchange 或其他事件触发器)时，“Pineapples”将被添加到数组水果中，并将开始显示在将来的自动完成列表中。

因此，在每个输入元素中，我添加 onchange = "addValue(this.value)"

因此，该函数的代码类似于

 function addValue(value) {

      fruits.push(value);

 }

但是这不起作用。即使是 onchange =alert('Hi')(即基本的 javascript 内容)也不起作用。

我该怎么做？

编辑: http://jsfiddle.net/ddne4v42/

Answer 1

您需要通过 jQuery 附加事件

已更新Working Fiddle用于您的 onchange 测试

这个Fiddle is with autoComplete souce update action

var fruits = ['Apples', 'Oranges'];

$(function () {
    $(".input-box").autocomplete({
        source: fruits
    }).on("change", function () {
       if(this.value&&fruits.indexOf(this.value)<0) fruits.push(this.value);
        $(this).autocomplete("option","source",fruits);
    });
});