强制用户从 JQuery UI 自动完成中选择并在选择后填充隐藏字段答案

【问题标题】：Force a user to select from JQuery UI Autocomplete and populate a hidden field after selecting强制用户从 JQuery UI 自动完成中选择并在选择后填充隐藏字段
【发布时间】：2010-12-21 17:39:26
【问题描述】：

我有一个大型 HTML 表单，其中包含许多需要帐户自动完成的字段。我用 AccountLookup 类标记这些字段，而 jQuery 为自动完成做脏活：

$(".AccountLookup").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "Lookup.asmx/GetAccounts",
            data: "{ 'Search': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Value
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 3
});

现在，当用户从自动完成中选择某些内容时，我需要它在标记输入字段之前填充隐藏字段；可能使用类似的东西：

$(this).prev().val(item.Key);

如何合并此功能？另外，如何强制用户从自动完成中进行选择？（所有值都是预定义的，用户不能添加新值。）

编辑： 据我通过检查 DOM 了解到，选择选项当前正在填充隐藏的表单字段。

select: function (event, ui) {
    $(this).prev().val(ui.item.key);
}

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

我知道这是一篇旧帖子 --- 但我在尝试解决类似问题时遇到了它（强制用户从列表中选择一个项目）...

        $("#ac").autocomplete({
            source: function (req, resp) {
                   //add code here...
            },
            select: function (e, ui) {
                $(this).next().val(ui.item.id);
            },
            change: function (ev, ui) {
                if (!ui.item)
                    $(this).val("");
            }
        });

【讨论】：

【解决方案2】：

$(".AccountLookup").autocomplete({
   /*...*/
}).result(function(event, item) {
   $(this).prev().val(item.Key);
});

您还可以使用jQuery validate 来确保已填充该字段。

【讨论】：

【解决方案3】：

对于强制选择，可以使用自动完成的"change" event

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });

【讨论】：

【解决方案4】：

对于选择操作，请尝试使用formatItem 选项。您可以将每个结果格式化为具有将填充另一个文本框的 onclick 事件。

要从自动完成中强制选择，您需要使用mustMatch 选项。

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

【讨论】：

我尝试使用 mustMatch 选项，但它似乎不起作用。我仍然可以输入服务器未定义的值并提交表单。
jQuery UI 自动完成没有“mustMatch”选项。我使用的插件与您所说的完全不同。

【解决方案5】：

不久前我遇到了同样的问题，一些帖子帮助我解决了这个问题。此后我修改了代码，因为我发现有些情况我希望从返回的信息中填写一个或多个字段。在自动完成的选择选项中，我添加了一个功能。

select: function (e, ui) {ReSetField({'txtID':'id','txtPrice':'price' [,etc...]}, ui)  }

函数“ResetFields”然后接收与 fieldnames 配对的元素名称的 JSON 列表，并使用 fieldnames 来匹配元素。然后可以从 ui 项中提取该值并将其放入 html 元素中。

    function ReSetField(_flds, _vals) {
  //Set up the flds to be reset with values passed in.  
  try {
    if (_flds != undefined) {
      if ($.type(_flds) == 'string') {
        _flds = JSON.parse(_flds);
      };
      var _fld = null;
      var _val = '';
      $.each(_flds, function (index) {
        if (index.length > 0) {
          _fld = '#' + index;   //Set the forms field name to set  
          _val = _flds[index]; //Pick up the field name to set the fields value 
          $fld = $(_fld);
          $fld.val(_vals.item[_val]); //Set the fields value to the returned value             
          }
        }
      })
    };
  }
  catch (e) {
    alert('Cannot set field ' + _fld + '.');
  } 
}

通过将“fieldlist”作为“fieldlist”之类的属性粘贴到HTML元素中，并使用“comboBox”之类的类，我然后可以使用单个函数查找所有 ComboBox 元素并在表单上设置自动完成功能，从而减少在表单上处理 2 次或更多查找所需的代码量。

【讨论】：