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

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

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

谢谢！！

Answer 1

默认的onSelect方法（当设置为“ return true”时，不会显示此行为

仅将return false设置为return true可以阻止它再次拨打电话。

Answer 2

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

我正在使用setTimeout（）方法来避免语义的默认行为，即覆盖我的值，但是它将值更改为title字段，然后迅速返回我想要的值，所以我来这里寻求一种更好的方法。

约书亚的答案引导我走上了正确的道路，这就是最终为我工作的原因。 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 是自动返回的，所有需要的是 < strong>setTimeout

语义UI搜索模块OnSelect问题

3 个答案: