MagicSuggest dynamic ajax source_H5之家 - 中国HTML5教程资源分享第一站

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:...},{...}]

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

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

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.

Cheers

数据参数可以接受URL加载从元素：

默认情况下，它将执行一个查询后但你可以改变，方法参数。默认情况下，每次你也投中一个关键的触发查询与用户输入的作为请求的“查询”的参数。

所以…在这里首先是你如何加载来自服务器的数据：

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

然后在data.php例如：

现在，每当你击中一个关键它将执行查询，你可以得到任何用户输入的取[ ]美元_post 'query在PHP代码。你可以过滤数据或执行一个数据库查询或什么的。

干杯