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

我很难让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。不幸的是，除了keypress事件捕获了一大堆不应该重置ID的按键之外，上述

select

事件中的

return false

语句（这是管理文本框中文本所必需的）还阻止

change

事件正确分配ui.item

所以现在我被卡住了——我真的不知道还有什么可以让小部件支持默认应该支持的功能。要么这个过程比它应该的复杂得多，要么我错过了一些非常明显的东西。我已经挑选了所有可用的事件和所有的例子，结果空手而归。事实上，甚至jQueryUI页面上的“自定义数据和显示”示例也存在这个问题

我可以在服务器端添加一些黑客来解决这个问题，但我更希望能够在客户端完成这项工作

---

我还更喜欢使用jQueryUIAutoComplete小部件，而不是切换到另一个小部件

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

链接和跨度的样式使其看起来像一个按钮，带有一个X，并且有一个click事件处理程序，用于从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>

当未选择某个项目时：

  <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”的请求参数。

当我假定您设置了以下字段时：

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

---

很高兴有一些服务器端验证，它可以将精确的：可见字段值转换为参考，以便快速键入。当然，这是一个老问题，但我的方法会有所帮助

在

.change

事件中，您可以使用循环从源列表中搜索具有中值的文本框值

转到了解更多详细信息：这里是Ajax源代码列表，但训练类似。

---

这件事困扰了我很多次，现在我终于明白了：）

你可以使用事件。preventDefault

通过ui.item.label或ui.item.value收集所选值，获取所需值并将其设置为相同的文本框

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

---

此外，在jQuery UI自动完成的选择处理程序中，每次选择一个项目时，都可以创建一个同名的隐藏字段，因此如果要选择多个国家，请将隐藏字段的名称属性设置为“国家”。如果单击某个条目将其删除，则会删除关联的隐藏字段。在服务器端，您最终检索到一个逗号分隔的ID列表，该列表必须拆分并转换为整数/长数组。这是一个很好的建议，在没有任何更简单的方法的情况下，我将这样做。理想情况下，我更喜欢在jQueryUI小部件的基础上少构建一些东西——在我看来，小部件应该或多或少地支持我想做的事情。我也被指派了类似的任务，所以我也在寻找如何做好的建议：）很高兴我的建议有帮助！另一件事是，如果一个人使用相同的页面进行创建和编辑，那么在编辑时重新加载页面时，您必须为隐藏字段中的值重新创建所有跨度等。目前，我只是在服务器端执行此操作。唯一的问题是像现在使用的类这样的东西必须在前端代码和后端代码中维护。。。我不喜欢它，但它是有效的。如果它对你有效，别忘了做标记作为回答：）对不起，我能澄清一些事情吗？您的问题中至少有一个是，如果用户输入，您希望在ID框中填入关联的ID