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
        });

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

如果你愿意的话，这里有一个JSFIDDLE。这很好，但是数据是完全加载的(在本例中是硬编码的)，是否有一种方法可以基于用户输入(每次数据更改)通过ajax加载数据？我不关心php方面，因为我很有能力在那一边，但在前端im非常新。

Answer 1

数据参数可以使用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查询，但您可以使用方法参数更改该查询。此外，默认情况下，每次按键时，它都会使用用户键入的请求的" query“参数触发查询。

所以..。首先是如何从服务器加载数据：

$(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‘来获取用户输入的任何内容。然后，您可以过滤数据或执行DB查询或其他任何操作。

干杯

Answer 2

我也在做同样的事情，但出于某种原因，magic建议书在无尽的循环中执行url，我使用的是1.2.8版本的magic建议书；我是从加载的文档中调用这个函数的。

函数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;

}