2016-05-17 55 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