MagicSuggest動態的AJAX源

Question

我使用MagicSuggest自動完成輸入文本，自動完成養活非常大的，所以我不能下載完成後，在他們的榜樣，他們提供了這樣的代碼：

JAVASCRIPT

$(document).ready(function() { 
     var jsonData = []; 
     var cities = 'New York,Los Angeles,Chicago,Houston,Paris,Marseille,Toulouse,Lyon,Bordeaux,Philadelphia,Phoenix,San Antonio,San Diego,Dallas,San Jose,Jacksonville'.split(','); 
     for(var i=0;i<cities.length;i++) jsonData.push({id:i,name:cities[i],status:i%2?'Already Visited':'Planned for visit',coolness:Math.floor(Math.random() * 10) + 1}); 

     $('#ms3').magicSuggest({ 
      selectionPosition: 'bottom', 
      renderer: function(city){ 
       return '<div>' + 
         '<div style="font-family: Arial; font-weight: bold">' + city.name + '</div>' + 
         '<div>Cooooolness: ' + city.coolness + '</div>' + 
         '</div>'; 
      }, 
      minChars: 1, 
      selectionStacked: true, 
      data: jsonData 
     }); 

HTML

<h3>Stacking in bottom, ajax source (type 1 char to load)</h3> 
<input id="ms3" style="width:400px;" type="text"/> 

如果你喜歡，這裏是一個JSFIDDLE。這很好，但是數據完全加載（在這種情況下是硬編碼的），有沒有一種方法可以基於用戶輸入（每次改變時）在Ajax上加載數據？我不關心PHP方面，因爲我在這方面非常有能力，但在前端我很新。

Answer 1

data參數可以通過url來加載元素。 從文檔：

data: array/string 

JSON Data source used to populate the combo box. 3 options are available here: 
No Data Source (default) 
When left null, the combo box will not suggest anything. It can still enable the user to enter multiple entries if allowFreeEntries is set to true (default). 

Static Source 
You can pass an array of JSON objects, an array of strings or even a single CSV string as the data source. 
For ex. data: [{id:0,name:"Paris"}, {id: 1, name: "New York"}] 

Url 
You can pass the url from which the component will fetch its JSON data. 
Data will be fetched using a POST ajax request that will include the entered text as 'query' parameter. The results fetched from the server can be: 
- an array of JSON objects (ex: [{id:...,name:...},{...}]) 
- a string containing an array of JSON objects ready to be parsed (ex: "[{id:...,name:...},{...}]") 
- a JSON object whose data will be contained in the results property (ex: {results: [{id:...,name:...},{...}] 

默認情況下它會執行POST查詢，但你可以改變與方法的參數。同樣默認情況下，每次你點擊一個鍵時，都會觸發用戶輸入的查詢作爲請求的「查詢」參數。

所以...首先這裏是你如何從服務器加載數據：

$(document).ready(function() { 
    $('#ms3').magicSuggest({ 
     data: 'http://yoururl/data.php' 
    }); 

，然後在data.php例如：

<?php 

$data = array(array("id"=> 1, "name"=> "New York", "country"=> "United States"), 
    array("id"=> 2, "name"=> "Los Angeles", "country"=> "United States"), 
    array("id"=> 3, "name"=> "Chicago", "country"=> "United States"), 
    array("id"=> 4, "name"=> "Houston", "country"=> "United States"), 
    array("id"=> 5, "name"=> "Philadelphia", "country"=> "United States"), 
    array("id"=> 6, "name"=> "Paris", "country"=> "France"), 
    array("id"=> 7, "name"=> "Marseille", "country"=> "France"), 
    array("id"=> 8, "name"=> "Toulouse", "country"=> "France"), 
    array("id"=> 9, "name"=> "Lyon", "country"=> "France"), 
    array("id"=> 10, "name"=> "Bordeaux", "country"=> "France"), 
    array("id"=> 11, "name"=> "Montpellier", "country"=> "France"), 
    array("id"=> 16, "name"=> "Phoenix", "country"=> "United States"), 
    array("id"=> 17, "name"=> "San Antonio", "country"=> "United States"), 
    array("id"=> 18, "name"=> "San Diego", "country"=> "United States"), 
    array("id"=> 19, "name"=> "Dallas", "country"=> "United States"), 
    array("id"=> 20, "name"=> "San Jose", "country"=> "United States"), 
    array("id"=> 21, "name"=> "Jacksonville", "country"=> "United States")); 

echo json_encode($data); 

?> 

現在每次你打一個鍵將執行該查詢，您可以通過在您的PHP代碼中獲取$ _POST ['query']來獲取用戶輸入的任何內容。然後，您可以過濾數據或執行數據庫查詢或其他任何事情。

乾杯

Answer 2

我幹什麼同樣的事情，但由於某些原因，magicsuggest執行無限循環 我現在用的是1.2.8版本magicsuggest的網址; 我從文檔onload調用這個函數。

功能createMultiSuggest（JSON）{

var jsonData=""; 

var strTrUserId = $("#TrUserId").val(); 
var strUrl='/loadAll.jsp'; 

_suggest=$("#pcpSuggest,#providerSuggest").magicSuggest({ 
    //resultAsString: true, 
    dataUrlParams: {"action":"fetchData","providerType":"providers","pid":strId,"ms": new Date().getTime()}, 
    minChars: 2, 
    displayField: 'fullname', 
    selectionStacked: false, 
    data: strUrl, 
    typeDelay:400 
}); 
return false; 

}