Question

我正在使用语义UI搜索我的title对象的data属性。 data有其他字段，我想在选择对象时访问它们。例如，我想将uuid属性中的值放在隐藏的输入中。

是否有语义UI方式这样做？ - 我无法从documentation中找到它（我知道我可以去搜索所有data.title所选的那个，但是......可能还有另一个方式）。

$('.ui.search').search({
        source: data,
        searchFields: [
          'title'
        ]
        ,onSelect : function(event){
          //...some other code
          $("#tags").append('<input type="hidden" value="'+ value_from_my_uuid_field +'"');
        }
  });


 <div class="ui search">
    <div class="ui icon input">
        <i class="search icon"></i>
        <input class="prompt" type="text" placeholder="Search subjects...">
    </div>
    <div class="results"></div>
  </div>

谢谢。

Answer 1

搜索小部件有onSelect回调，您可以注册（docs）当您的用户从搜索响应中选择建议时，系统会调用您的回调：

$searchWidget.search({
        onSelect: function(result) {
            // do something with result.id or whatever
        }
    });

Answer 2

我遇到了类似的问题（但是使用了ajax源数据）我终于在结果（服务器端）上添加了隐藏的内容标签，例如<div style='display:none;' class='id'>12345</div>。

在onSelect-callback中，我搜索结果（使用jquery）以获取此内容：

onSelect : function(event){
 var $result = $(this);

 var id = $result.find(".id").html();
 ...

 // Return 'default' triggers the default select behaviour of the search module.
 return "default";
}

HTH

Answer 3

语义UI实际上提供了一种访问任何对象属性的方法。我使用了dropdown和search类，如docs和[{3}}所示的属性。

<template name="search_drop">
  <div class="ui floating dropdown labeled search icon button">
    <i class="search icon"></i>
    <span class="text">Search subjects...</span>
    <div class="menu">
      {{#each subjects}}
        <div class="item" data-id="{{this.id}}" data-value="{{this.value}}" data-child="{{this.haschildren}}">{{this.name}}
        </div>
      {{/each}}
    </div>
  </div>
</template>

subjects包含具有id，name，value，haschildren属性的对象。

Template.search_drop.rendered = function(){
      $(".dropdown").dropdown({
        onChange: function(value, text, $choice){
          console.log(value); //will output the equivalent of {{this.name}}
          console.log($choice[0].attributes); //list of attributes
          console.log($choice[0].attributes["data-id"].value); //the equivalent of {{this.id}}
        }
      });
}

Semantic-ui搜索 - 访问对象属性未在＆＃39; searchFields＆＃39;中使用。

3 个答案: