Question

所以我正在尝试将搜索API的自定义结果恰当地显示给results div。

我知道结果需要在名为title的结果对象中有一个键默认显示，但有没有办法告诉它要显示的结果对象中的key？

或者更好的是有没有办法对所显示的结果进行样式化或自定义？之后如何获得所选对象？

API的响应和通信工作正常。

这是我到目前为止所做的：

Answer 1

尝试使用回调onResultsOpen并在迭代中使用每个结果 $('.result').each(function(){//do stuff to the result here})

为我工作（有同样的问题让我来到这里）

Answer 2

Semantic UI的API示例显示了如何修改结果。实际上an example由.ui.search制作。只是提出一个想法，你必须将参数传递给onResponse，随你修改并返回它的修改版本。

$('.ui.search')
  .search({
    minCharacters : 3,
    apiSettings   : {
      url        : 'api.yousearchservice.com/{query}',
      onResponse : function(theresponse) {
         // here you modify theresponse object,
         // then you return the modified version.
         return theresponse
      }
   });

Answer 3

您可以设置结果服务器端的结构，然后在AJAX响应中处理其余部分：

E.g从DB中获取城市

$results = array();
foreach($cities as $city){         
   $results['items'][] = array(
         'name' =>  $city->name,
         'country' => $city->country,
         'currency' => $city->currency,
         'url' => '...' // could be the ActionURL for Semantic 
           );
     }
return response()->json($results, 200); // return as JSON

然后在你的Javascript中你只需要循环thourgh $results['items']并分配相应的fields类别等。

$('.ui.search')
.search({
    apiSettings: {
        url: 'URL?q={query}',
        onResponse: function (citiesResponse) {
            var response = { // response as the items on the front-end
                results: {}
                };

            // here citiesResponse.items = $results['items']
            $.each(citiesResponse.items, function (index, item) {

                // here country = Category if you wish to have the results in that format
                var country = item.country.toUpperCase() || 'Unknown',
                    maxResults = 15;

                if (index >= maxResults) {
                    return false;
                }
                if (response.results[country] === undefined) {
                    response.results[country] = {
                        name: country,
                        results: []
                    };
                }
                response.results[country].results.push({
                    title: item.name, // $results['items'][]['name']
                    description: item.currency, // $results['items'][]['currency']
                    url: item.url  // ActionURL when item is clicked  $results['items'][]['url']
                });
            });
            return response;
        }
    },
    // define custom fields
    fields: {
        results: 'results',
        title: 'title',
        category: 'country',
        actionURL: "url"
    },
    type: 'category',
    cache: true,
    minCharacters: 3,
    searchDelay: 1000
});

他们的网站文档是self-explanatory。如果您希望获得更多灵活性，而不是在description字段中添加所有字段，则可以创建自定义模板。

如何在语义`ui search`模块中修改结果

3 个答案: