0

I am using jquery chosen, with the specific component multiple select.

I want to listen if something is typed in the chosen text bar and alert the content typed in that.

To achieve that I have:

HTML:

<select id="searchZip" name="types[]" multiple class="searchZip chosen-select-no-results" tabindex="12">
</select>

JS:

<script type="text/javascript">
    var config = {
        '.chosen-select': {},
        '.chosen-select-deselect': {
            allow_single_deselect: true
        },
        '.chosen-select-no-single': {
            disable_search_threshold: 10
        },
        '.chosen-select-no-results': {
            no_results_text: 'Oops, nothing found!'
        },
        '.chosen-select-width': {
            width: "95%"
        }
    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }
</script>

I want to call alert() if something is typed in the search box. How can I do that?

$("#searchZip").chosen().change( alert("a"); );

When I do this, I always get this error:

Uncaught SyntaxError: missing ) after argument list

How can I call alert with the input that is typed in the chosen input?

4
  • Remove ; after the alert statement
    – Asken
    Mar 3, 2016 at 8:03
  • Now, alert is coming by default
    – SA__
    Mar 3, 2016 at 8:21
  • Yes, you'll need to replace it with a function like: function() { alert("a"); }. If nothing is happening it's because the change-event is not firing.
    – Asken
    Mar 3, 2016 at 9:42
  • Also you'll need to add some items to the select or you can not choose anything :)
    – Asken
    Mar 3, 2016 at 9:44

3 Answers 3

0

Inside the alert box there should not be any semicolon as it terminates the statement..

just write .change(alert("a"));

3
  • Now, alert is coming by default
    – SA__
    Mar 3, 2016 at 8:21
  • document.getElementById('searchZip'); function namet() { alert("Hey"); }
    – SemperFi
    Mar 3, 2016 at 8:27
  • @SulthanA You have to trigger jquery click event
    – SemperFi
    Mar 4, 2016 at 11:14
0

You need to change the following line from this:

$("#searchZip").chosen().change( alert("a"); );

To this:

$("#searchZip").chosen().change( alert("a") );

When JavaScript sees a ;, it assumes it is the end of the line. Since your ; was before inside the .change(), JavaScript did not see a closing ) for .change(), so it producedthe following error stating that it was missing ) after argument list

Uncaught SyntaxError: missing ) after argument list
1
  • Now, alert is coming by default
    – SA__
    Mar 3, 2016 at 8:21
0

That line passed to function .change() should be a function. alert("a") is a function invocation (statement). That invocation could be moved into lambda (anonymous) function:

$("#searchZip").chosen().change( function() {alert("a"); });

Or a named function could be used:

function alertA() {
    alert("a");
}
$("#searchZip").chosen().change( alertA );

For more information, refer to the MDN documentation on functions as callbacks.

The "documentation" is a little lacking as far as the arguments passed to .change(), but change calls .trigger() so the arguments are:

  • event: event

    contains information about the event

  • extraParam: Object

    contains information about the selected option

The extraParam can be used to get the text of the selected option:

function alertA(event, result) {
    alert(result.selected);
}

See a demonstration of this below.

$('.chosen-select-no-results').chosen({
  no_results_text: 'Oops, nothing found!'
});

function alertA(event, result) {
  alert(result.selected);
}
$("#searchZip").chosen().change(alertA);
<link href="https://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="searchZip" name="types[]" multiple class="searchZip chosen-select-no-results" tabindex="12">
<option>Cat</option>
<option>Dog</option>
<option>Zebra</option>
</select>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.