3

入力テキストのオートコンプリートにMagicSuggestを使用しています。オートコンプリート フィードは非常に大きいため、完全にダウンロードできません。例では、次のコードを提供しています。

ジャバスクリプト

    $(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側については非常に有能なので気にしませんが、フロントエンドでは非常に新しいです。

4

2 に答える 2

5

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 クエリを実行しますが、メソッド パラメータで変更できます。また、デフォルトでは、キーを押すたびに、ユーザーがリクエストの「クエリ」パラメーターとして入力した内容でクエリがトリガーされます。

だから...まず、サーバーからデータをロードする方法は次のとおりです。

$(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 クエリなどを実行したりできます。

乾杯

于 2013-03-18T22:52:29.137 に答える
0

私は同じことをしていますが、何らかの理由で、magicsuggest が無限ループで URL を実行します。magicsuggest の 1.2.8 バージョンを使用しています。ドキュメントのオンロードからこの関数を呼び出しています。

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

}

于 2013-06-06T21:59:19.890 に答える