具有混合文本/ ID搜索的jQuery UI自动完成

Question

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

我有以下要求:

如果用户从窗口小部件中选择一个值,我想将ID传递给服务器.

如果用户没有选择值并输入原始文本,或者修改已经选择的值,我希望清除ID字段,只删除要发送到服务器的原始文本.

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

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

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

即使将鼠标悬停在其中一个项目上,更改选择也会将$(输入)引用的文本框中的文本更改为基础键,而不是标签.从用户交互的角度来看,这是非常不受欢迎的 - 事实上,我正在研究这个问题的原因是因为我正在构建的网站的用户一直对他们输入的文本感到困惑,似乎变成了随机数!

我在文本框下添加了一个隐藏字段并实现了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事件,并声明参数的item属性ui将设置为所选项.我想我可以在按键上重置隐藏的id字段,并在更改自动完成时重新填充ID.不幸的是,除了按键事件捕获一大堆不应该重置ID 的按键之外,return false上述select事件中管理文本框中文本所必需的语句可以防止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”键的请求参数。