jQuery UI 自动完成与混合文本/ID 搜索

Question

我在让 jQuery 的自动完成小部件为我工作时遇到了很多麻烦。我正在使用服务器中的键/值对列表。

我有以下要求：

如果用户从小部件中选择一个值，我想将 ID 传递到服务器。

如果用户未选择值并输入原始文本，或修改已选择的值，我希望清除 ID 字段，仅将原始文本发送到服务器。

假设 someAjaxFunction 返回自动完成小部件所需的对象数组：{label:label, value:key}。

最初，我像这样设置自动完成小部件：

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

即使将鼠标悬停在其中一项上来更改选择也会将 $(input) 引用的文本框中的文本更改为基础键，而不是标签。从用户交互的角度来看，这是非常不可取的 - 事实上，我调查这一点的真正原因是因为我正在构建的网站的用户始终对他们输入的文本似乎变成随机数字感到困惑！

我在文本框下添加了一个隐藏字段，并实现了 select() 和 focus() 事件，以便隐藏 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的按键之外，上面selectreturn false语句> 管理文本框中文本所需的事件会阻止 change 事件正确分配 ui.item。

所以现在我陷入了困境 - 我真的不知道我还能尝试什么来使小部件支持默认情况下应该支持的功能。要么这个过程比应有的复杂得多，要么我错过了一些非常明显的东西。我已经挑选了所有可用的事件和所有示例，但却空手而归。事实上，即使是 jQuery UI 页面上的“自定义数据和显示”示例也存在这个问题。

我可以在服务器端添加一些技巧来解决这个问题，但我真的更希望能够在客户端级别执行此操作。

我还更愿意坚持使用 jQuery UI 自动完成小部件，而不是切换到另一个小部件。

Answer 1

我执行自动完成的方式是创建一个包含输入的容器 div。当我选择一个元素时，我将包含跨度的链接添加到容器中，并隐藏输入框。

链接和跨度的样式使其看起来像一个带有 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 ...
            }
        });
    });
});

有一些服务器端验证非常好，它可以将精确的 :visible 字段值转换为引用，以便快速输入人员当然。

Answer 3

虽然这是一个老问题，但我的方法可以提供帮助。

在 .change 事件中，您可以使用循环从源列表中搜索文本框值。

转到了解更多详细信息：这里位于 Ajax 源列表中，但锻炼类似。
在 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());