Feeding variable to AJAX call

[onkelarie]

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

<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>

[ReFreezed]

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

[onkelarie]

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?

[onkelarie]

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!

<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>