javascript 语义UI -获取搜索查询

w8biq8rn 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(108)

我使用的是语义UI，更具体地说是ui fluid seach。我声明如下：

<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>

我需要发送一个请求到一个RESTful server与搜索查询作为主体的一部分，这是问题来了-我不知道如何检索搜索查询。我尝试如下：

$('#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;
            },
        },
    });
}

但在本部分中：

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

document.getElementById('inputValue').value始终为空。
那么，我如何检索搜索查询呢？

JavaScript

来源：https://stackoverflow.com/questions/48630133/semantic-ui-getting-search-query

2条答案

按热度按时间

btqmn9zl1#

我通过在apiSettings的beforeSend方法中设置请求的数据来解决这个问题，如下所示：

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

    return settings;
}

更多信息可以在语义UI API使用页面上找到。

赞(0）回复(0）举报 2023-05-21

xqkwcwgp2#

我设法通过将请求的数据作为查询字符串传递来解决这个问题。你需要一些修改，实际上你需要像这样获取下拉列表的值$（'. seach_text_dropdown>. search'）.val（）。这是**.seach_text_dropdown>.search这些是dropdown中附加的类。要获取下拉列表类型字符串的数据，请在onSearchQuery方法中使用“$（'. seach_text_dropdown>. search'）.瓦尔（）”，该方法具有query**，该查询将传入apiSettings方法，如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();
  }
});

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 语义UI -获取搜索查询

2条答案

相关问题

热门标签

最新问答