设置jQuery自动完成匹配标准？

Question

我编写了一个带有 jQ​​uery UI 自动完成功能的页面。

用户应使用自动完成功能从地点列表中选择一个位置。在此改进之前，用户必须从一长串列表中选择一个位置，这会更好，除了一个问题。

位置的格式如下：

“加拿大”

“加拿大 -> 阿尔伯塔”

“加拿大 -> 英属哥伦比亚”

“美国”

“美国 -> 阿拉巴马州”

“美国 -> 阿拉斯加”

等等。因此，我通过键入“CA”来测试这个应用程序，期望列出以“CA”开头的国家和州，例如：“加拿大”、“美国 -> 加利福尼亚”、“墨西哥 -> 坎佩切”。

但是，令我沮丧的是，我看到所有加拿大省份一一列出，因为“CA”与“Canada”中的“CA”匹配。我现在有近二十个选项可供选择。

用户在查找州时必须看到带有国家名称和州名称的层次结构，但“加拿大”作为国家必须是单个匹配作为单个位置。

如何设置 jQuery 自动完成功能，以允许我在这么多单词中指定仅匹配“->”右侧的文本？

现在，在我的 Javascript 代码中，我有 var locations = "[{'label':'Canada','value','Canada'},{'label':'Canada -> Alberta','value':'Alberta'}...].

我不想让这项工作异步进行。我担心这会导致太多的网络服务调用。

Answer 1

我想通了。有一个好的 jQuery UI 参考会很有帮助！

对于 .autocomplete 方法的源变量，您可以传入自动完成数据，也可以将处理程序传递给函数以检索自动完成选项，如下所示：

$('#txtData').autocomplete( source: getData )

处理函数将传递两个参数，第一个是具有一个字段的对象：term，其中包含用户输入的文本。另一个是另一个函数的处理程序。这个另一个函数有一个参数，即包含自动完成选项的数据：

function getData(userData, setAutocompleteData) {
    var userText = userData.term;
    var autocompleteData = getMatchingOptions(userText);
    // getMatchingOptions returns a list of matching autocomplete options
    setAutocompleteData(autocompleteData);
}

上面的代码框架结合您的getMatchingOptions 实现应该允许您自定义向用户显示哪些自动完成选项。