Semantic UI - Getting search query

Question

I am using Semantic UI and more specifically a ui fluid seach. I have declared it as following:

        <div id="inputIDtextfield" class="ui fluid search" style="width: 250px">
            <div class="ui icon input">
                <input id="inputValue" style="width: 250px" class="prompt" type="text" placeholder="Onekey_ID">
                <i class="search icon"></i>
            </div>
            <div class="results"></div>
        </div>

I need to send a request to a RESTful server with the searching query as part of the body and this is where the problem comes - I am not sure how to retrieve the searhing query. I tried as following:

$('#inputIDtextfield')
    .search({
        minCharacters: 3,
        searchOnFocus: false,
        searchDelay: 500,
        apiSettings : {
            url : '/rest/get-hcp-suggest',
            method: 'POST',
            data: JSON.stringify({
                'search': document.getElementById('inputValue').value
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            onResponse: function(response){
                console.log(response);
                var convertedResponse = {
                    results : []
                };

                // translate response to work with search
                $.each(response, function(index, item) {
                    // add result to category
                    convertedResponse.results.push({
                        title       : item.name,
                        description : item.onekey_id,
                    });
                });
                return convertedResponse;
            },
        },
    });
}

but in this part:

data: JSON.stringify({
    'search': document.getElementById('inputValue').value
}),

document.getElementById('inputValue').value is always empty.

So how can I retrieve the searching query?

Answer 1

I managed to solve the problem by pass the data of the request as query string . You need some modification actually you need to get your value of dropdown like this

$('.seach_text_dropdown>.search').val()

And this is .seach_text_dropdown>.search these are class attached in dropdown. And to get data of typed string of dropdown use in onSearchQuery method like this

$('.seach_text_dropdown>.search').val()

and this method has jQuery and this query will pass in apiSettings method like this search_query={query}.

$('.ui.dropdown.seach_text_dropdown').dropdown({
  minCharacters: 2,
  apiSettings: {
    url: 'api/end_point?search_query={query}',
    method: 'GET',
    cache: false,
    throttle: 300,
    onResponse: function(response) {
      var response = Object.values(response);
      var dropdownMenu = $('.ui.dropdown.seach_text_dropdown .menu');
      dropdownMenu.empty(); // Clear existing options

      for (var key in response) {
        if (response.hasOwnProperty(key)) {
          var item = response[key];
          var value = item.value;
          var text = item.text;
 var dropdownItem = $('<div>').addClass('item').attr('data-value', value).attr('data-text', text).text(text);

          dropdownMenu.append(dropdownItem);
        }
      }
    }
  },
  onSearchQuery: function(query) {
    var dropdown = this;
    // Update the API URL with the search query
    dropdown.apiSettings.urlData = {
      query: $('.seach_text_dropdown>.search').val()
    };
    // Perform the API request
    dropdown.queryRemote();
  }
});

Answer 2

I managed to solve the problem by setting the data of the request in the beforeSend method of the apiSettings, as following:

beforeSend: function(settings) {
    settings.data = JSON.stringify({
        'search': document.getElementById('inputValue').value
    });

    return settings;
}

Some more information can be found on the semantic UI API usage page.