Select2 Ajax Laravel - 结果未显示

Posted 2023-05-07

【中文标题】Select2 Ajax Laravel - 结果未显示

【英文标题】：Select2 Ajax Laravel - results not showing

【发布时间】：2016-09-11 22:54:36

【问题描述】：

JS

$("#location").select2(
        ajax: 
        url: "/search/locations",
        dataType: 'json',
        delay: 250,
        data: function (params) 
          return 
            q: params.term, // search term
          ;
        ,
        processResults: function (data) 
            return 
            results: data
            ;
        ,
        cache: true
      ,
        minimumInputLength: 1,
        placeholder: function()
        $(this).data('placeholder');
        
      );

控制器

 public function searchLocations()
        
            $q = Input::get('q');
            $results = Location::where('suburb', 'LIKE', '%'. $q . '%')
               ->orWhere('state', 'LIKE', '%'. $q . '%')
               ->orWhere('postcode', 'LIKE', '%'. $q . '%')
               ->get();
            return Response::json( $results ); 
        

我可以看到正在发出的 ajax 请求，并正在接收数据，但它没有显示结果。我正在使用最新版本的 Select2 (v4.0.2)

【问题讨论】：

您打算将 JSON 的哪些字段用作选项的值和标签？

郊区、州、邮政编码旨在显示在选择中

返回结果时，Select2 是说No result found 还是列出一堆（看似）空的选项？

如果我输入应该显示的内容，则选择完全为空 - 如果我输入一堆随机的内容，那么它会显示“未找到结果”

【参考方案1】：

当您从远程源加载自定义数据时，Select2 通常不知道如何处理它们。您需要通过为选项设置 templateSelection 和为所选选项设置 templateResult 来指定每个结果的格式，如下所示：

function locationResultTemplater(location) 
      return location.suburb + " " + location.state + " " + location.postcode;
 

function locationSelectionTemplater(location) 
      if (typeof location.suburb !== "undefined") 
          return locationResultTemplater(location);
      
      return location.text; // I think its either text or label, not sure.

$("#location").select2(
        ajax: 
        url: "/search/locations",
        dataType: 'json',
        delay: 250,
        data: function (params) 
          return 
            q: params.term, // search term
          ;
        ,
        processResults: function (data) 
            return 
            results: data
            ;
        ,
        cache: true
      ,
        minimumInputLength: 1,
        placeholder: function()
           $(this).data('placeholder');
        ,
        templateResult: locationResultTemplater,
        templateSelection: locationSelectionTemplater

  );

请注意，为了返回 html 标记而不是纯文本，您需要让模板函数返回一个 jQuery 对象选择器，例如return $("<div class='styleme'>Content</div>);

【讨论】：

感谢@apokryfos 现在显示结果。作为选择中的默认值，它显示“未定义未定义未定义”。显然缺少“郊区、州、邮政编码”的值。知道如何用占位符/默认值替换它吗？

它这样做很奇怪。这意味着默认情况下选择了一个选项。我已经进行了编辑，但请确保您没有在 <select> 定义中默认选择某些内容。