使用jquery ui-autocomplete和jeditable將值發佈到服務器

Question

我最近將jQuery升級到1.4.2，並將jQuery-UI升級到1.8.2。不管錯誤與否，當我嘗試將新的ui自動完成功能（而不是bassistance.de中的舊功能）與可調整的功能相結合時，我開始拉動頭髮。

當我在頁面中編輯一個字段（通常是一個帶有唯一ID的跨度）時，用戶開始輸入某人的姓名，並設法在由jeditable生成的輸入字段中顯示標籤名稱和姓氏。 我的問題是，我的數據庫中的一些聯繫人具有相同的名稱+姓氏。所以發送結果「姓名+姓氏」不會讓我得到正確的聯繫。相反，我需要發送與該聯繫人關聯的ID。

有沒有人設法創建一個新的自定義輸入，涉及最新的ui-autocomplete，ID將存儲在隱藏的輸入中，然後發佈到處理腳本，而標籤顯示在可見的輸入字段中？

附加問題：任何人都可以確認，它是絕對不可能使用ui-autocomplete標籤顯示在輸入字段和ID存儲在相同的輸入值？隱藏的輸入總是必要的權利？

提前

Answer 1

許多感謝的努力之後幾天（我的JavaScript技能是相當糟糕），我好不容易纔得到的東西用皮特Freitag的代碼工作（見上述評論）。

該代碼可能是醜陋的（這就是爲什麼我把它提交給你們，任何建設性的意見是值得歡迎的）。

$.editable.addInputType('autocompleteCON', { 
     element : $.editable.types.text.element, 
     plugin : function(settings, original) { 
      $('input', this).each(function() { 
       /* change name of original input */ 
       $(this).attr('name', 'cellvalue_autocomplete_label'); 
       $(this).attr('id','parentInput'); 
       /* create new hidden input with name of orig input */ 
       $(this).after('<input type="hidden" name="cellvalue" id="cellvalue_autocomplete_hidden" />'); 
       $(this).autocomplete({ 
        source: "tab_autocomplete.php?cat=CON", 
        change: function(event, ui) { 
         if (!ui.item) { 
          $(this).val(''); 
          $('#cellvalue_autocomplete_hidden').val(''); 
          return false; 
         } 
        }, 
        select: function(event, ui) { 
         $('#cellvalue_autocomplete_hidden').val(ui.item.value); 
         $('#parentInput').val(ui.item.label); 
         return false; 
        } 
       }); 
      // alert(result); 
      }).data("autocomplete")._renderItem = function(ul, item) { 
        return $("<li></li>") 
         .data("item.autocomplete", item) 
         .append("<a>" + item.label + " <span style='font-size:0.8em;font-weight:normal;max-width:650px;'>(" + item.desc + ")</span></a>") 
         .appendTo(ul); 
      }; 
     }, 
     submit: function (settings, original) { 
      var value = $('#cellvalue_autocomplete_hidden').val(); 
      $('input', this).val(value); 
     } 
}); 

$(".autocompleteCON_con").editable("update.php", { 
    id   : 'cellid', 
    name  : 'cellvalue', 
    event  : 'dblclick', 
    submitdata : {id: "<?php echo $id_contact; ?>"}, 
    type  : 'autocompleteCON', 
    indicator : 'Saving...', 
    select  : true, 
    tooltip  : 'Double click to edit...', 
    placeholder : '<b style="color:#AAA">Edit</b>', 
    style  : 'display: inline', 
    height  : '25px', 
    width  : '150px', 
    onblur  : 'ignore', 
    submit  : 'Save', 
    cancel  : 'Cancel', 
    callback : function(value, settings) { 
     // some function 
      } 
});