清除语义搜索-界面

Question

如何获取Semantic-UI搜索字段的选中结果

使用onSelect事件，我可以获得选定的结果，但当使用退格键清除字段时，这不起作用。

使用field.search('get result')也不会像预期的那样返回结果为空。

Answer 1

您可以获得如下所示的选择结果：

onSelect:function(result){ 
  console.log(result)
}

Answer 2

有一个示例HTML表单，其中有两个输入，如下所示(一个隐藏)：

<form id="search-box-form">
    <input type="hidden" name="search" value="" />
    <div class="ui search location-search">
        <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search locations..." />
            <i class="search icon"></i>
        </div>
        <div class="results"></div>
    </div>
</form>

与使用onSelect填充隐藏字段的方式相同，也可以使用onResultsClose清除隐藏输入。注意：onResultsClose将在语义将值放入它自己的字段之前运行，因此需要使用超时函数。

        jQuery(document).ready(
            function() {
                jQuery('.location-search')
                    .search({
                        source : content,
                        searchOnFocus : true,
                        minCharacters : 0,
                        onSelect: function(result, response) {
                            var value = result.value;
                            $('#search-box-form').find('input[name=search]').val(value);
                        },
                        onResultsClose: function(){
                            setTimeout(function() {
                                if (jQuery('.location-search').search('get value') == '') {
                                    $('#search-box-form').find('input[name=search]').val('');
                                }
                            }, 500);

                        }
                    })
                ;
            }
        );