Question

I have autocomplete working on my site with the following:

$(function () {
    $("#client").autocomplete({
        source: "/appointments/clients.json",
        minLength: 1,
        select: function (event, ui) {
            $('input[name="clientid"]').val(ui.item.id);
            $('#app-submit').html('Add Appointment for ' + ui.item.value);
        }
    });
});

What I want to do now is that when a user types in something that is not shown on the dropdown, I’d like for the following to take place:

$('input[name="clientid"]').val('');
$('#app-submit').html('Add Appointment');

I tried using the following but it didn’t work:

$(function () {
    $("#client").autocomplete({
        source: "/appointments/clients.json",
        minLength: 1,
        select: function (event, ui) {
            if(typeof(ui.item)){
                $('input[name="clientid"]').val(ui.item.id);
                $('#app-submit').html('Add Appointment for ' + ui.item.value);
            } else {
                $('input[name="clientid"]').val('');
                $('#app-submit').html('Add Appointment');
            }
        }
    });
});

Answer 1

the select evevnt is only triggered when you select an item in dropdown
you could do it on search event

$(function () {
    $("#client").autocomplete({
        source: "/appointments/clients.json",
        minLength: 1,
        select: function (event, ui) {
            $('input[name="clientid"]').val(ui.item.id);
            $('#app-submit').html('Add Appointment for ' + ui.item.value);
        },
        search: function() {
            $('input[name="clientid"]').val('');
            $('#app-submit').html('Add Appointment');
        }
    });
});