语义 UI 搜索模块 OnSelect 问题答案

【问题标题】：Semantic-UI Search Module OnSelect issue语义 UI 搜索模块 OnSelect 问题
【发布时间】：2019-02-25 06:00:18
【问题描述】：

我使用 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

【解决方案1】：

默认的 onSelect 方法（当设置为 'return true' 时不显示此行为

只需将return false 设置为return true 即可防止它再次拨打电话。

【讨论】：

感谢您的反馈。问题是return true 触发了默认操作（来自语义文档：“该函数应返回 false 以防止默认操作（关闭搜索结果并选择值）”）。在这种情况下，我试图以特定格式显示值（根据变量address）。如果我使用return true，那么一旦获取一个值，它就会显示默认格式，覆盖我定义的格式。关于如何做到这一点的任何想法？
您尝试使用setTimeout 然后返回true 设置一个10 毫秒的计时器，然后在超时内更改下拉列表的值。
看来成功了！不确定它是否超级干净，但迄今为止最好的解决方案！感谢您的帮助

【解决方案2】：

选择结果后，我无法将特定值写入搜索字段。

我使用 setTimeout() 方法来避免语义覆盖我的值的默认行为，但它会将值更改为标题字段，然后很快回到我想要的，所以我来这里寻找更好的方法。

约书亚的回答让我走上了正确的道路，这就是最终为我工作的原因。 return false 努力防止发生其他任何事情，添加 'hide results' 是我想要的唯一额外行为：

onSelect: function (result, response) {
    doSomethingWithResult(result)
    $(".ui.search").search('hide results')
    return false
}

【讨论】：

【解决方案3】：

以下是多个输入字段的示例，以及使用 setTimeout 用不同的字段填充它们：

    $(".ui.input.search").search({
    type: "standard",
    minCharacters: 2,
    onSelect: function onSelect(result, response) {
        console.log(result);
        setTimeout(()=>{
            $(this).search('set value', result.address);
        },10);
    },

如您所见，使用$(this) 和箭头函数()=>{ 可以填充被点击的相应输入框，并且由于自动返回true，因此只需要setTimeout

【讨论】：