语义-UI 搜索模块 OnSelect 问题

Question

我使用语义-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 方法的原因是为了以特定方式显示地址结果（不同于它的返回方式）。我面临的问题是，当我 select 返回列表中的地址时，它似乎正确地调用了 'set value' 但随后似乎生成了一个具有新值的新 ajax 调用，因此再次（单独）显示一个带有该地址的新下拉菜单。如上面的调用所示，我尝试使用 jQuery（而不是调用 'set value'）手动将值分配给输入字段，但行为同样相同。

我尝试使用 'cancel query' 方法来尝试在 select 值时取消最后一次 ajax 调用，但它似乎没有任何效果（并且我宁愿避免不必要的电话）。

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

谢谢！！

Answer 1

The default onSelect method (when set to 'return true' does not show this behaviour

只需将 return false 设置为 return true 即可防止其再次调用。

Answer 2

我在选择结果后将特定值写入搜索字段时遇到问题。

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

Joshua 的回答让我走上了正确的道路，这就是最终对我有用的东西。 return false 努力防止发生任何其他事情，添加 'hide results' 是我想要的唯一额外行为：

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

Answer 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是return自动全部需要的是 setTimeout

语义-UI 搜索模块 OnSelect 问题

Semantic-UI Search Module OnSelect issue

semantic-ui