2016-05-17 76 views
0

我尝试使用select 2插件和ajax作为数据源,但在输入一些字母后,我总是在结果列表中收到“未找到结果”。我预计它会在我的搜索结果中列出来自我的Ajax响应中的所有找到的项目(字段:姓氏)。我在本文的最后附加了ajax响应。Ajax请求Select2 - Resultlist始终为空

我的HTML选择元素:

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

我选择二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

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