Javascript not working together with jQuery UI

Question

I'm having trouble trying to get simple javascript to work together with jQuery UI. I'm using jQuery UI to power autocomplete for a set of form input elements, and while that is working satisfactorily, no JavaScript code I write works. Strangely enough, when I comment all the jQuery UI stuff out and just try to run my JavaScript, everything works perfectly!

Is there something in the jQuery UI code library is overriding my ability to use self-defined JavaScript functions?

And here's the script that is running my autocomplete.

<script>

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

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


</script>

So basically, as you can see, this code is running autocomplete on some input element (with class input-box) and the data/list-items in the autocomplete are taken from array fruits.

Awesome. This works well.

However, now I want for the value of the input element to be appended to the array fruits when it loses focus. So basically, you type "Pineapples", and when you shift focus from the input box (using onchange or another event trigger), "Pineapples" is added to array fruits and will start showing up in future autocomplete listings.

And so in every input element, I add onchange = "addValue(this.value)"

And so, the code for the function is something like

 function addValue(value) {

      fruits.push(value);

 }

But it doesn't work. Even onchange = alert('Hi'), i.e., basic javascript stuff doesn't work.

How do I do this?

Edit: http://jsfiddle.net/ddne4v42/

You likely have an error in your code preventing other code from running. I'd suggest you reproduce the problem in a jsFiddle so we can see what's actually happening and take a look. You obviously have something basic wrong. jQueryUI is javascript too, so you can't really say that no javascript is running, just not the javascript you wan. — jfriend00, Nov 02 '14 at 07:01
@MadhavNarayan : any fiddle is appreciated as suggested by jfriend00 — RahulB, Nov 02 '14 at 07:07

score -1 · Accepted Answer · answered Nov 02 '14 at 07:45

You need to attach events through jQuery

Updated Working Fiddle for your onchange Test

This 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 not working together with jQuery UI

1 Answers1