semantic-ui - 语义 UI 搜索模块 OnSelect 问题

问题描述

我使用 Semantic-UI 搜索模块创建了一个自动完成输入字段（搜索地址）。自动完成本身工作正常，但我在尝试使用 OnSelect 方法自定义操作时遇到了奇怪的行为。

$('#address_search')
              .search({
                apiSettings: {
                  url: 'ajax_search_address/{query}'
                },
                minCharacters: 4,
                maxResults: 5,
                showNoResults: true,
                type: 'category',
                searchDelay: 0,
                duration: 200,
                fields: {
                    categories: 'results',
                    categoryName: 'state',
                    categoryResults: 'results',
                    description:'city',
                },
                onSearchQuery: function(query){
                    $('#address_search').addClass("loading");
                },
                onResults: function (response){
                    $('#address_search').removeClass("loading");
                },
                onSelect: function(result, response) {
                    address = result.title + ', ' + result.city + ' ' + result.region;
                    $('#address_search').search('set value', address);
                    //$('#address_search').find('input').val(address);
                    $('#address_search').search('hide results');
                    $('#address_search').removeClass("loading");

                    return false;
                },
              });

我使用自定义 OnSelect 方法的原因是以特定方式显示地址结果（与返回方式不同）。我面临的问题是，似乎当我从返回的列表中选择地址时，它会正确调用“设置值”，但随后似乎会使用新值生成一个新的 ajax 调用，因此会显示一个带有此地址的新下拉列表再次（单独）。如上面的调用所示，我尝试使用 jQuery 手动将值分配给输入字段（而不是调用“设置值”），但行为再次相同。

在选择值时，我尝试使用“取消查询”方法尝试取消最后一次 ajax 调用，但它似乎没有任何效果（我宁愿避免不必要的调用）。

有谁知道如何防止这种情况？默认的 onSelect 方法（当设置为 'return true' 时不会显示此行为，因此我认为有一种方法可以防止这种情况发生，但我无法根据文档或有关该主题的其他线程找到它。

谢谢！！

标签： semantic-ui

semantic-ui - 语义 UI 搜索模块 OnSelect 问题

问题描述

解决方案

推荐阅读