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

Javascript不能与jQuery UI一起使用

1 个答案: