我正在使用 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 方面，因为我在这方面非常有能力，但在前端我很新。

最佳答案

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'] 来获取用户键入的任何内容。然后您可以过滤数据或执行数据库查询或其他任何操作。

干杯

关于php - MagicSuggest动态ajax源码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15488053/