從自動完成填充文本字段

Question

我想在自動填充字段（「名稱」）中選擇一個值時填充字段（「數字」）。請看這個已更新Link

比方說，我有兩組數據。組1包含名稱和設置2 - 數字。它們是相關的，這樣的： NAME A = 0001

NAME B = 0002

NAME C = 0003等

<div> 
<table> 
    <div id="Q101" class="printable"> 
     <tr> 
      <td width="41" align="left" valign="top"> 
       <div class="QNumber">1.1</div> 
      </td> 
      <td align="left" valign="baseline"> 
       <div class="QText">Name:</div> 
      </td> 
      <td width="300"> 
       <div class="Response"> 
        <input name="Text" type="text" id="vslName" size="31"> 
       </div> 
      </td> 
     </tr> 
    </div> 

     <div id="Q102"> 
     <tr> 
      <td width="41" align="left" valign="top"> 
       <div class="QNumber">1.2</div> 
      </td> 
      <td align="left" valign="baseline"> 
       <div class="QText">Number:</div> 
      </td> 
      <td width="300"> 
       <div class="Response"> 
        <input name="Text" type="text" id="Q101" size="10"> 
       </div> 
      </td> 
      < </tr> 
    </div> 
</table> 
</div> 

我想什麼有是當用戶從自動填充字段選擇NAME（ id =「vslName」），號碼自動填入IMO NUMBER（id =「Q101」）。另一個問題 - 在哪裏放置NUMBERS？我在函數中保留了自動完成值，因爲會有最多50個條目。因此：

$(function() { 
    var availableTags = [ 
     "AZOV SEA", 
     "BARENTS SEA", 
     "KARA SEA", 
     "EAST SIBERIAN SEA", 
     "TUCHKOV BRIDGE", 
    ]; 
    $("#vslName").autocomplete({ 
     source: availableTags 
    }); 
    }); 

預先感謝您！ PS。我不是JS的專家，因此「赦免我的法語」，如果這對你們來說是一件小事）））））012） PS.2 - 在上面的代碼中，type =「text」可以是「number」 - 不真的很重要）））

Answer 1

爲什麼不只是使用jQuery UI's autocomplete？

編輯：如果您使用的是jQuery UI的自動完成，那麼您需要綁定到select事件來處理該事件。詳情請參閱http://api.jqueryui.com/autocomplete/#event-select。

像這樣的東西應該做的伎倆：

$("#vslName").autocomplete({ 
    source: availableTags, 
    select: function (event, ui) { 
     var tag = ui.item.value; 
     $('input#Q101').val(availableTags.indexOf(tag) + 1); 
    } 
}); 

我不是100％地肯定這是否會工作，但其基本思想是，在選擇時，你得到的選擇的價值標記，然後將輸入的值設置爲包含在該標記中的文本。

編輯：正如我在我的評論中提到的那樣，JavaScript缺乏像哈希或字典這樣的構造，這是實現這一點的顯而易見的方式，但它可能是假的。

首先，你的數組需要是一個對象數組，而不僅僅是一個字符串數組。您需要爲jQuery UI定義label和value屬性。你也可以定義你自己的屬性，所以如果你創建一個number屬性，那也應該做這個工作。

像這樣將是合適的：

var availableTags = Array; 
availableTags[0] = { "name": "AZOV SEA", "value": "AZOV SEA", "number": 0 }; 

重複availableTags線對於每個剩餘的標籤，每次遞增的數目。然後，您可以使用$.grep方法獲取所選標記的數字屬性，如下所示：

var tag = ui.item.value; 
var item = $.grep(availableTags, function (e) { return e.name == tag; }); 
$('input#Q101').val(item[0].number);