Пользовательский интерфейс jQuery .autocomplete ()

Question

У меня есть автозаполнение, работающее на моем сайте со следующим:

$(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);
        }
    });
});

Теперь я хочу сделать следующее: когда пользователь вводит что-то, что не отображается в раскрывающемся списке, я бы хотел, чтобыпроизойдет следующее:

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

Я попытался использовать следующее, но это не сработало:

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

Выбор события запускается только при выборе элемента в раскрывающемся списке. Вы могли бы сделать это на 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');
        }
    });
});

Answer 2

Я не знаю, что это за идея, не видя разметки.Но я думаю, что:

$("#client").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/appointments/clients.json",
            dataType: "jsonp",
            success: function( data ) {
                var suggestions = $.map( data, function( item ) {
                    return {
                        label: item.value,
                        value: item.id
                    }
                });
                // idea: whatever I have, extend to extra item.
                suggestions.push({
                    label: 'Add appointment',
                    value: 0
                });
                response( suggestions );
            }
        });
    },
    select: function(evt, ui){
        if( ui.item.label == 'Add appointment'){
            /* do something special with it */
        }else{
            /* blah blah */
        }
    }
});