Question

我有一个HTML表单，用户应填写“city”和“state”输入。 “city”输入由typeahead.js支持，当用户从列表中选择一个城市时，“city”和“state”都会更新：

<input id="city" name="city" type="text" autocomplete="off"/>
<input id="state" name="state" type="text"/>

...

var $typeaheadCity = $("#city").typeahead({
    name: "city",
    valueKey: "city",
    remote: "../servlet/SearchCity?q=%QUERY",
    template: '<p>{{city}}, {{state}}</p>',
    engine: Hogan
});
$typeaheadCity.on("typeahead:selected", function(obj, datum, name) {
    $("#state").val(datum.state);
});

除非我的城市名称相同但状态不同，否则它会按预期运作。在这种情况下，仅列出第一个匹配项，其他列将不可用于选择。例如，考虑服务器的以下响应：

[
    { "city": "Campinas", "state": "AC" },
    { "city": "Campinas", "state": "RS" },
    { "city": "Campinas", "state": "SP" },
    { "city": "Campinas do Piaui", "state": "PI" },
    { "city": "Campinas do Sul", "state": "RS" }
]

将使用

填充预先输入列表

Campinas, AC
Campinas do Piaui, PI
Campinas do Sul, RS

我实施了一种变通方法，为每个城市添加一个唯一ID，将“id”设置为“valueKey”，并在“typeahead：selected”事件中使用城市名称更新“城市”输入。但是这种解决方法打破了typeahead的自动完成功能，当用户在列表中导航时，输入值将被“不友好”的id代码覆盖。

Answer 1

我的理解是，typeahead默认删除重复的项目，默认情况下，项目的唯一性由“valueKey”字段确定。

我认为它可能只是最新的测试版，但它看起来像typehead now has a dataset option named "dupChecker"，它允许您提供一个函数，用于确定项目的唯一性。

从this change request开始，看起来像“dupChecker”选项只是为了像你这样的情况而添加。

列出jquery typeahead.js中的重复键

1 个答案: