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查询，但您可以使用method参数更改它。此外，默认情况下，每当您点击某个键时，它会触发查询，并将用户输入的内容作为请求的“查询”参数。

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

$(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在无限循环中执行url 我正在使用1.2.8版本的magicsuggest; 我从文档onload中调用此函数。

function 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;

}

MagicSuggest动态ajax源码

2 个答案: