3

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"/>

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.

Gad
  • 41,526
  • 13
  • 54
  • 78
DomingoSL
  • 14,920
  • 24
  • 99
  • 173

2 Answers2

5

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

Gad
  • 41,526
  • 13
  • 54
  • 78
  • Thanks you very munch for your answer, I just realize that you are the author of the plugin :), when you have time please take a look on this other question: http://stackoverflow.com/questions/15722156/sending-vars-to-server-using-magicsuggest THANKS! – DomingoSL Mar 30 '13 at 18:51
  • @karlipoppins can you suggest how to add previously added results to the data key now where we have the url. In simple language how to merge pre-selected value to data key. – xyz Jul 16 '14 at 12:50
  • Can you please be more precise? – Gad Jul 16 '14 at 16:34
  • @karlipoppins, I have to suggest list with pre selected items. But thanks to you I have updated the version and now it's working. 1 more query, In Version 1.3 the value of the auto_suggest field was submitted as JSON but with Version 2.1 it's was submitted as an array. Can you suggest how to submit the input value as JSON string in this version. – xyz Jul 17 '14 at 07:16
0

I am doin the same thing, but for some reason the magicsuggest executes the url in endless loop I am using the 1.2.8 version of magicsuggest; i am calling this function from the document 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;

}

saurabhsingh
  • 107
  • 1
  • 10