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

私は今、何をしたいかというときに、ユーザーの種類ドロップダウンリストに表示されていない何かで、私はあります「場所を取るために、次のようにするためにD：

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

あなたがでそれを行うことができ ドロップダウンに項目を選択すると、選択evevntのみがトリガされ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

私はkはありませんマークアップを見ることなく全体のアイデアが何であるかしかし、私の推測では、次のとおりです。

$("#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 */ 
     } 
    } 
});