MagicSuggest动态的AJAX源 [英] MagicSuggest dynamic ajax source

问题描述

我使用 MagicSuggest 自动完成输入文本，自动完成养活非常大的，所以我不能下载完成后，在他们的榜样，他们提供这个code：

I'm using MagicSuggest for auto completing an input text, the autocomplete feed its very big so i cant download it complete, in their example they provide this code:

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 。这是伟大的工作，但同样，数据是否完整加载（在这种情况下很难codeD），有没有办法来加载基于用户输入（每次改变时间）对Ajax的数据？我不关心，因为IM在那边很能干的PHP的一面，但在前端IM很新的。

If you like, here is a JSFIDDLE. This is working great, but again, the data is complete loaded (in this case hardcoded), is there a way to load the data over ajax based on the user input (each time it changes)? I don't care about the php side since im very capable on that side, but in the front end im very new.

推荐答案

数据参数可以采用URL来加载内容。
从文档：

The data parameter can take a url to load up elements. From the docs:

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参数查询的关键。

By default it will perform a POST query but you can change that with the method parameter. Also by default everytime you hit a key it triggers the query with what the user has typed in as the "query" parameter for the request.

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

So... First of all here is how you load up data from the server:

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

，然后在data.php例如：

and then in data.php for example:

<?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 code范围内获取$ _ POST ['查询']输入用户不管。然后，您可以过滤数据或执行DB查询或什么的。

Now everytime you hit a key it will perform that query and you can get whatever the user typed by fetching $_POST['query'] within your PHP code. You can then filter the data or perform a DB query or whatever.

干杯

这篇关于MagicSuggest动态的AJAX源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！