带有返回标签和值的函数的 jquery 自动完成源选项答案

【问题标题】：jquery autocomplete source option with function returning label and value带有返回标签和值的函数的 jquery 自动完成源选项
【发布时间】：2018-03-31 22:56:10
【问题描述】：

我正在使用 jQuery 3.3.1 和 jQuery-ui 1.12.1。我有一个输入字段，用户应该在其中选择一个数组的对象，这些对象以前通过 ajax 调用检索并存储在一个变量中。

source option of autocomplete 的文档说，如果提供了过滤术语的函数，它应该返回一个字符串数组以供用户选择。

我想将视图（我向用户显示的字符串）与数据（它下方的对象）分开。我已经看到我可以从源选项返回一个对象数组{label: 'string to display', value: the_object}，并且标签正确显示，但是当用户选择它时，它变成了一个 anonymous 字符串[object Object] .

在选择之后在输入字段中包含标签字符串会很好，但可以直接显示术语，无需任何替换；否则我想清除该字段，我想清除它：

select: function(event, ui) {
  var _content = ui.item;   // Store the content of the field somewhere.
  $(event.target).val('');
}

但是.val('') 不起作用，.val(null) 也不起作用。

这是一个测试小提琴：https://jsfiddle.net/xpvt214o/16284/

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

让elements_that_match 对象的值是您想要的字符串，而不是对象。

elements_that_match.push({"label" : _label, "value" : element_obj});

到

elements_that_match.push({"label" : _label, "value" : element_obj.name + ', ' + element_obj.country });

https://jsfiddle.net/xpvt214o/16303/

【讨论】：

我想避免“重新解释”从字符串返回的值，因为我在选择选项中使用它来填充表单。但是你给了我一个解决问题的想法，谢谢！

【解决方案2】：

受@CertainPerformance 答案启发，我找到的解决方案是使用不同的键存储原始字典对象，例如orig_obj，这样我就可以在select 方法中直接处理它。

这样，当用户选择标签时，label 字符串就会显示出来，但是我们可以操作对象的原始形式。

小提琴：https://jsfiddle.net/xpvt214o/16356/

【讨论】：