Dynamically add source on nd2-search autocomplete

[fromhell13]

Hi, i'm developing mobile app using jQM and using parse.com as data storage. I'm trying to dynamically add the autocomplete source value from parse data to nd2-search but received below error "Cannot read property 'label' of undefined". Is it i need to hardcore the autocomplete label or my code is wrong? Need advice. Thanks

Here is the code:

new $.nd2Search({
          placeholder : "Search",
          defaultIcon : "globe-alt",
          source : [ getSearch(function(key){
                             key;
                        })],
          fn : function(result) {
            console.log('--- Your custom handling ---');
            console.log('you picked: ');
            console.log(result);
          }
    });


function getSearch(callback){

  var Thread = Parse.Object.extend("Thread");
    var query = new Parse.Query(Thread);
    query.find({
    success: function(results) {
        // Do something with the returned Parse.Object values 
        var key = "";

        for (var i = 0; i < results.length; i++) {
        var object = results[i];
            key=key+'{label: "'+object.get("Title")+'", value: "'+object.id+'"},';

        }
        key = key.slice(0, -1);

        return callback(key);

    },
    error: function(error) {
        console.log("Error: " + error.code + " " + error.message);
    }

    });  
}

[valinaga]

new $.nd2Search({ placeholder : "Search", defaultIcon : "globe-alt", source :function( request, response ) { $.getJSON( "/your_page.php/"+request.term, function( data ) { response( data ); }); }, ... you can replace $.getJSON with $.ajax if your request is jsonp.

[Saneesh]

Hello, valinaga's solution I modified like below to get it work.

$.getJSON( "/your_page.php/"+request.term, function( data ) { new $.nd2Search({ placeholder : "Search", defaultIcon : "globe-alt", source :data, fn : function(result) { console.log('--- Your custom handling ---'); console.log('you picked: '); console.log(result); } }); });

[yanike]

Here's a good way to do this.

As it says here -> http://api.jqueryui.com/autocomplete/#option-source

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must support CORS). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

Meaning if you set your source to "https://www.yourdomain.com/api?ctype=json", the plugin will automatically add the parameter "term" to your GET call making it "https://www.yourdomain.com/api?ctype=json&term=foo".

So your client-side code should look like this:

new $.nd2Search({
  placeholder : "Input Placeholder",   // Placeholder in the search field
  defaultIcon : "globe-alt",  // optional: icon | null
  source : "https://www.yourdomain.com/api?ctype=json",
  fn : function(result) { // this function will be executed when a valid result item is selected
    console.log('--- Your custom handling ---');
    console.log('you picked: ');
    console.log(result);
  }
});

and your server-side language should be looking for the "term" parameter as the search query. Let your server-side script do all the structuring of the JSON response.

Example of a valid JSON response structure: ( http://jsoneditoronline.org/?id=c9c006f2d924d4a7acce67e0ee79abfe ) [{"label":"hi","value":"hello"},{"label":"bye","value":"see ya"}]