Feeding variable to AJAX call

Hi everyone,

I'd appreciate your help on the following.

I have a JQuery script which makes an AJAX call. When I feed the datastring as 'web' (an actual string value), it works (the php script in the AJAX call returns all jobs starting with 'web%' from the database).

But it's not working when feeding the ID's value of the inputfield (preferrably while typing in the inputfield). What am I doing wrong?

Thank you in advance for any help,

Onkelarie

Code:

---

<script>

    $(document).ready(function () {
        'use strict';

        $.ajax({
            url: 'assets/ajax/icares_lookup.php',
            dataType: 'json',
            cache: false,
            data: { datastring: $('#autocomplete_icares').val() }
        }).done(function (data) {
            var status = $('#selection'),
            professions = $.map(data, function (value) {
                return value;
            });

            $('#autocomplete_icares').autocomplete({
                lookup: professions,
                onSelect: function (suggestion) {
                    //status.html('You selected: ' + suggestion);
                }
            });
        });

    });
</script>

        <div class="form-input">
            <input type="text" name="icares_career_goal" id="autocomplete_icares">
            <div id="selection"></div>
        </div>

---

You're making the Ajax call right when the page has loaded, so the autocomplete_icares input is probably empty.

First off, thanks for checking any odd coding, much appreciated.

The whole trick should be that, when the user is typing in the inputfield with the ID #autocomplete_icares, it should make the AJAX call.... I'm somehow missing something. Should there be a keyup action somewhere in the JQuery?

This thread can be locked...

I managed to solve the problem (well, actually, my colleague;))

The only thing missing was the actual keyup action, and a simple function around the AJAX call does the trick!

Code:

---

<script>

    $(document).ready(function () {
        'use strict';

        $('#autocomplete_icares').keyup(function() {
            $.ajax({
                url: 'assets/ajax/icares_lookup.php',
                dataType: 'json',
                cache: false,
                data: { datastring: $(this).val() }
            }).done(function (data) {
                var status = $('#selection'),
                professions = $.map(data, function (value) {
                    return value;
                });

                $('#autocomplete_icares').autocomplete({
                    lookup: professions,
                    onSelect: function (suggestion) {
                        //status.html('You selected: ' + suggestion);
                    }
                });
            });
        });

    });
</script>

        <div class="form-input">
            <input type="text" name="icares_career_goal" id="autocomplete_icares">
            <div id="selection"></div>
        </div>

---