首页 文章

设置jQuery自动完成匹配条件？

提问于
浏览 次
0

我写了一个带有jQuery UI自动完成的页面 .

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

位置格式如下：

“加拿大”

“加拿大 - >艾伯塔省”

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

“美国”

“美国 - >阿拉巴马州”

“美国 - >阿拉斯加”

等等 . 所以，我通过输入“CA”来测试这个应用程序，期望列表国家和州与“CA”一样，“加拿大”，“美国 - >加利福尼亚”，“墨西哥 - >坎佩切” .

然而，令我沮丧的是，我看到所有加拿大省份逐一列出，因为“CA”与“加拿大”中的“CA”相匹配 . 我现在有近二十种选择可供选择 .

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

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

现在，在我的Javascript代码中，我有var locations =“[{'label'：'Canada'，'value'，'Canada'}，{'label'：'Canada - > Alberta'，'value'：'阿尔伯塔'} ...] .

我不想让这个工作异步 . 我担心这会导致太多的Web服务调用 .

jquery json jquery-ui autocomplete jquery-ui-autocomplete

1 回答

  • 0

    我想通了 . 它有助于获得良好的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 的实现相结合，可以让您自定义向用户显示的自动完成选项 .

    回复于

相关问题