Ajax请求Select2 - Resultlist始终为空

时间:2016-05-17 12:50:01

标签: jquery ajax jquery-select2

我尝试使用带有ajax的Select 2插件作为数据源,但我总是收到"未找到结果"在结果列表中,键入一些字母后。我希望它会在我的搜索结果中列出我的Ajax响应中找到的所有项目(Field:LastName)。我在本文末尾附上了ajax回复。

我的HTML选择元素:

<select class="player-select form-control">
</select>

我的Select2 JS:

jQuery(document).ready(function() {
    $(".player-select").select2({
        ajax: {
            url: "/database/players.php",
            dataType: "json",
            delay: 250,
            processResults: function (data) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                return {
                    results: data.LastName
                };
            }
        },
        minimumInputLength: 1,
    })
});

我的AJAX响应:

[  
   {  
      "Id":"27",
      "FirstName":"Joe",
      "LastName":"Cole",
      "CommonName":null,
      "Rating":"72",
      "Position":"14",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"34079",
      "FirstName":"Ashley",
      "LastName":"Cole",
      "CommonName":null,
      "Rating":"77",
      "Position":"14",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"146545",
      "FirstName":"David",
      "LastName":"C\u00f3rcoles Alcaraz",
      "CommonName":"C\u00f3rcoles",
      "Rating":"66",
      "Position":"45",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"171565",
      "FirstName":"Miguel",
      "LastName":"Linares C\u00f3lera",
      "CommonName":"Linares",
      "Rating":"69",
      "Position":"45",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"180216",
      "FirstName":"S\u00e9amus",
      "LastName":"Coleman",
      "CommonName":null,
      "Rating":"81",
      "Position":"25",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"189884",
      "FirstName":"Shannon",
      "LastName":"Cole",
      "CommonName":null,
      "Rating":"63",
      "Position":"195",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"198199",
      "FirstName":"Pablo",
      "LastName":"Alcolea Guerrero",
      "CommonName":"Alcolea",
      "Rating":"63",
      "Position":"45",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"203268",
      "FirstName":"Larnell",
      "LastName":"Cole",
      "CommonName":null,
      "Rating":"63",
      "Position":"14",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   },
   {  
      "Id":"219795",
      "FirstName":"Joel",
      "LastName":"Coleman",
      "CommonName":null,
      "Rating":"56",
      "Position":"14",
      "LastPriceUpdate":"0000-00-00 00:00:00"
   }
]

1 个答案:

答案 0 :(得分:3)

您的processResults方法会略有不同,因为您尝试在每个项目上获得与LastName匹配的自定义结果。我已经添加了评论,以便您知道必须做些什么。

processResults: function(data, params) {
  var resData = [];//just to store matching data
  //iterate through each data
  data.forEach(function(value) {
    //check if the LastName param contains the search param entered
    if (value.LastName.indexOf(params.term) != -1)
      resData.push(value)//push the item to resData array
  })
  return {
    results: $.map(resData, function(item) {
      //now while returning you need to map the array text and id property since you are
      //returning custom query
      return {
        text: item.LastName,
        id: item.Id
      }
    })
  };
},

<强>

A Full Demo Here