从自动完成填充文本字段

Question

当在自动完成字段（“名称”）中选择了一个值时，我正在尝试填充一个字段（“数字”）。请查看此已更新 Link

假设我有两组数据。第 1 组包含名称，第 2 组包含数字。它们是相关的，例如： 名称 A = 0001

名称 B = 0002

名称 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>

我想要的是当用户从自动完成字段 (id="vslName") 中选择 NAME 时，数字会自动填充到已提交的 IMO NUMBER (id="Q101") 中。另一个问题 - 在哪里放置数字？我将自动完成值保留在函数中，因为最多有 50 个条目。因此：

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

提前感谢您！ PS。我不是 JS 的专业人士，因此如果这对你们来说是一件小事，请“原谅我的法语”））））） PS.2 - 在上面的代码中 type="text" 可能是 "number" - 并不重要 atm)))

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% 确定这是否可行，但基本思想是在 select 事件中，您获取所选标签的值，然后将输入的值设置为该标签中包含的文本.

编辑：正如我在评论中提到的，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);