如何實現jQuery UI自動完成'自動填充'和/或'selectFirst'功能？

Question

首先，讓我先說我thatI知道其他類似的問題，像這樣的從這裏開始：

How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

，但它並不真正做什麼，我期望的那樣。我會解釋下面的原因。 我也知道張貼插件的原始開發商這個簡單的指南：

http://www.learningjquery.com/2010/06/autocomplete-migration-guide

，我也做了前者插件和UI插件的幾個還算用戶定製執行的許多實現。

話雖如此，這是我的問題，爲什麼第一個解決方案不適合我。 soruce來自JSON對象形式的數據庫。我使用自定義功能設置選項，見下圖：

source: function (request, response) { 
    var sourceData = $.parseJSON(result); //result is an array coming in via ajax 
    response($.map(sourceData, function (item) { 
     return { label: item.PortName, value: item.PortName, source: item }; 
     //item has about 12 properties that could be used for other forms. 
    })) 
} 

然後我也有一個自定義change()事件抓起source以上，並做了幾件事情像店項目本身的的data()對象元素，並解析item對象中的某些數據以用於其他表單域等。

上述解決方案僅設置輸入值到第一個自動填充選項，但不會複製select或change自動完成的事件。所以實際上並不是真正的selectFirst或autoFill複製品。

的change功能如下：

change: function (event, ui) { 
      if (ui.item) { 
       $('input:[name="another_form_field"]').val(ui.item.source.PortId); 
      } 
      else { 
       $(this).val(''); 
       $('input:[name="release_port_id"]').val(''); 
      } 
     } 

這是一種快速，簡單，實施mustMatch功能的現在。一旦我實現了這兩個功能，這很可能會改變。

好吧，說了這麼多，有關如何實現這些功能的任何一個或兩個的任何建議？我曾嘗試附上上述問題中建議的blur事件，但那不會起作用。

在此先感謝。

編輯： 這是我到目前爲止嘗試過的。將blur事件綁定到自動完成元素。註釋行使用下拉列表中第一個元素的值並設置輸入的文本。這將工作，如果這就是我所需要的，但我需要複製選擇事件，這意味着我需要更多的數據（不僅僅是文本）。

.live('blur', function (e) { 
     if ($('.ui-autocomplete li').length > 0) {    
      //$(this).val($(".ui-autocomplete li:visible:first").text()); 
      $(".ui-autocomplete li:visible:first").click(); 
     } 
     else { 
      $(this).val(''); 
      $('input:[name="release_port_id"]').val(''); 
     } 
    }); 

的另一個問題該解決方案是，它實際上覆蓋在自動完成的change事件，並預期它不執行。這就是我包括else部分的原因。這不像它看起來的樣子，而是一個概念證明。

Answer 1

我打算髮一個賞金，但最後想通了。

這是我提出的解決方案。玩了這個之後，我發現插件使用.data()來存儲選項數據。所以我能夠獲得完整的對象並解析出我需要的數據來完成其他元素。然後，挑戰在於，即使用戶沒有點擊或選擇選項，也能識別選擇何時有效。爲此，我檢查是否有任何選項與該值匹配，如果他們是我複製select。否則我清除這些字段。然後我再次利用.data()來存儲選擇是否有效，如果不是，我可以再次清除這些字段。以下是我的代碼。

歡迎評論。

$('#autocomplete_input').autocomplete({ 
     source: function (request, response) { 
      $.get("/DataHandler.ashx", { Type: "ExpectedType", Query: request.term }, function (result) { 
       var sourceData = $.parseJSON(result); 
       response($.map(sourceData, function (item) { 
        return { label: item.PortName, value: item.PortName, source: item }; 
       })) 
      }); 
     }, 
     minLength: 3, 
     change: function (event, ui) { 
      if (ui.item) { 
       $('#another_element"]').val(ui.item.source.PortId); 
      } 
      else { 
       if (!$(this).data('valid')) { 
        $(this).val(''); 
        $('#another_element').val('');      
       } 
      } 
      $(this).data('valid', false); 
     } 
    }).live('blur', function (e) { 
     if ($('.ui-autocomplete li:visible').length > 0) { 
      item = $($(".ui-autocomplete li:visible:first").data()).attr('item.autocomplete'); 
      $(this).val(item.label); 
      $('#another_element').val(item.source.PortId); 
      $(this).data('valid', true); 
     } 
    });