jQuery UI .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您可以在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 */
        }
    }
});