CODEWITHSUNDEEP
semantic-ui
Loredana Cirstea
Loredana Cirstea

Reputation: 60

Semantic-ui search - access object properties not used in 'searchFields'

I am using the Semantic UI search for the title property of my data object. data has other fields and I want to access them when an object is selected. For example, I want to put the value from the uuid property in a hidden input.

Is there a Semantic UI way of doing this? - I couldn't figure it out from the documentation (I know I can go and search through all data.title's for the selected one, but ... there probably is another way).

$('.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>

Thank you.

Upvotes: 1

Views: 2189

Answers (3)

linuxdan
linuxdan

Reputation: 4854

The search widget has an onSelect callback you can register (docs) When your user selects a suggestion from the search response, your callback will be called with the selection: 

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

Upvotes: 2

Loredana Cirstea
Loredana Cirstea

Reputation: 60

Semantic UI actually provides a way of accessing any of the object's properties. I used both dropdown and search classes, as shown in the docs with hidden input values for the properties.

<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 contains my objects with id, name, value, haschildren properties.

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}}
        }
      });
}

Upvotes: 0

Rob
Rob

Reputation: 5481

I had a similar problem (but with ajax source data) and I finally ended up adding hidden content-tags to the results (on server side) like <div style='display:none;' class='id'>12345</div>.

And in the onSelect-callback I search the result (with jquery) for this content:

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

Upvotes: 0

Related Questions