jQuery UI自動完成與混合文本/ ID搜索

Question

我有很多麻煩，使jQuery的自動填充小工具爲我工作。我正在使用來自服務器的鍵/值對列表。

我有以下要求：

如果用戶從窗口小部件選擇一個值，我想ID傳遞給服務器。

如果用戶沒有選擇一個值並輸入原始文本，或者修改了一個已經被選中的值，我想要清除ID字段，並且只是將原始文本發送到服務器。

假設someAjaxFunction返回自動填充小部件期望的對象數組：{label:label, value:key}。

起初我設置自動完成構件像這樣：

$(input).autocomplete({ 
    source: sourceFunction, 
    minLength: 1 
}); 

改變選擇，甚至通過將鼠標懸停在項目中的一個改變了$（輸入）參考下面的鍵文本框中的文本，而不是標籤。從用戶交互的角度來看，這是非常不可取的 - 事實上，我正在研究這個問題的原因是因爲我正在構建的站點的用戶一直對他們輸入的文本感到困惑，似乎它們變成了隨機數字！

我添加了一個隱藏字段下的文本框中並實施的select（）和焦點（）事件，以掩飾，像這樣的ID：

$(input).autocomplete({ 
    source: sourceFunction, 
    minLength: 1 
    focus: function(event, ui) { 
     $(idField).val(ui.item.value); 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    select: function(event, ui) { 
     $(idField).val(ui.item.value); 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    minLength: 1 
}); 

這種運作良好，當用戶被粘到由自動完成下拉菜單提供的腳本。該ID隱藏並正確提交給服務器。不幸的是，如果用戶想要在框中輸入一些自由格式的文本並根據該值進行搜索，則ID字段不會重置，並且之前選擇的ID將被提交給服務器。這也相當混亂。

jQuery UI自動完成文檔列出change事件，並指出ui參數的item屬性將設置爲所選項目。我想我可以重置按鍵上隱藏的ID字段，並重新填充ID如果自動完成更改。不幸的是，除了按鍵事件捕獲了一大堆按鍵，不應該重置ID，事件中的事件（這是管理文本框中的文本所必需的）中的語句阻止change事件具有UI .item正確分配。

所以現在我被卡住了 - 我真的不知道還有什麼我可以嘗試使小部件支持功能，它似乎應該默認支持。要麼這個過程比它本該更復雜，要麼我錯過了一些非常明顯的東西。我挑選了所有可用的事件和所有的例子，並且空手而歸。事實上，即使jQuery UI頁面上的「自定義數據和顯示」示例也會遇到這個問題。

我可以在服務器端添加一些黑客來掩蓋這一點，但我真的希望能夠在客戶端級別做到這一點。

我還希望堅持jQuery UI自動填充小部件，而不是切換到另一個。

Answer 1

我在做自動完成的方式是創建一個包含輸入的容器div。當我選擇一個元素時，我將一個包含span的鏈接添加到容器中，然後隱藏輸入框。

鏈接和跨度的樣式使它看起來像一個按鈕，帶有一個X，並具有一個單擊事件處理程序以從DOM中移除條目，清除隱藏的字段，並在單擊時重新顯示輸入框。所以，當一個項目被選中：

<div class="container"> 
    <a href="#"><span>Selected Item</span></a> 
    <input id="myautocomplete" type="text" /> 
    <input type="hidden" name="myvalue" value="1" /> 
    </div> 

當未選擇一個項目：

<div class="container"> 
    <input id="myautocomplete" name="myautocomplete" type="text" /> 
    <input id="myvalue" name="myvalue" type="hidden" value="" /> 
    </div> 

這樣，你要麼被迫選擇一個項目，或者你輸入自由格式文本。在後端，如果帶有'myvalue'鍵的請求參數爲空，那麼您應該使用'myautocomplete'鍵來查看請求參數。

Answer 2

當我想你有以下字段設置：

<div> 
    <input type="text" name="visible" class="autocomplete-reference" /> 
    <input type="hidden" name="hidden" /> 
</div> 

您需要初始化以下JS（它的工作原理與jQuery 1.5.2）：

$(document).ready(function() { 
    $('.autocomplete-reference').each(function() { 
     $(this).keydown(function(e){ 
      /* 
      * this will reset hidden id reference on each visible field manual change 
      * we have to bind it on keydown because we want to recognize event of submiting form by enter after autocomplete set 
      */ 
      if (e.keyCode != 13) { 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(''); 
       }); 
      } 
     }); 
     $(this).autocomplete({ 
      minLength: 1, 
      /* you can set appending of autocomplete menu into some container to set css contextually 
      appendTo: '#someElem',*/ 
      source: sourceFunction, 
      search:function (event, ui) { 
       //TODO ...spinner init... 
      }, 
      open:function (event, ui) { 
       /* you can grab autocomplete menu widget by this to manipulate some recognizing id, etc.. 
       * $(this).autocomplete('widget') 
       */ 
       //TODO ..stop spinner ... 
       $(this).keydown(function(e){ 
        /* this is important for live reference updates while arrow keys changes */ 
        if (e.keyCode == 37 || e.keyCode == 39) { 
         $($(this).data('autocomplete').menu.active).find('a').trigger('click'); 
        } 
       }); 
      }, 
      focus: function(event, ui) { 
       /* here we'll map our data object onto both fields */ 
       $(this).val(ui.item.label); 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(ui.item.key); 
       }); 
      }, 
      select: function(event, ui) { 
       /* here we'll map our data object onto both fields */ 
       $(this).val(ui.item.label); 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(ui.item.key); 
       }); 
      }, 
      close: function(event, ui) { 
       //TODO ..stop spinner ... 
      } 
     }); 
    }); 
}); 

這是非常好的，有一些服務器端驗證，可以將精確的：可見的字段值轉換爲引用，以便快速打字。

Answer 3

雖然它的一個老問題，我的方法可以幫助。

在.change事件中，您可以使用循環從源列表中搜索帶有值的文本框值。

轉到更多的細節：這裏是在Ajax源列表中，但鍛鍊是類似的。 Search a text In Jquery AutoComplete Ui

這件事就一直困擾了我很多次，最終現在我理解了它:)

Answer 4

您可以使用event.preventDefault

通過ui.item.label收集你選擇的值或ui.item.value並獲取所需的值並將其設置爲相同的文本框。

var idNameCombo = ui.item.label; 
      event.preventDefault(); 
      $("#mID").val(idNameCombo.split(",")[0].trim());