External data source for @ or #

[klaasruysschaert]

How would it be possible to load tags or mentions from an external data source (php-json) instead of hard coding them in the source? Thank you for pointing me in the right direction. And thank you for all your work on this plugin!

[Yermo]

It's rather simple. Create a web service that expects to get a term to search and responds with possible matches for that term. In my own code I use JSON for the request and reply.

The web service, in my case, returns an array of possible matches in the format that is included in the hard coded example.

So all you need to do, once you have your web service done replace the hard coded block of autocomplete matches with an ajax call to the web service

callback: function( term, response )
   {
   ddt.log( "# callback with term '" + term + "'" );

   // set up your ajax call here and send it the value of term in the request.
   // you'll probably want to do it asynchronously so you'll set a success callback. which 
   // then forwards the results to autocomplete

   // have your web service respond with a data structure that looks like the following:

   [ 
{ label: 'tag1', value: { value: 'tag1', content: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only">Tag1</span>' } },
{ label: 'tag2', value: { value: 'tag2', content: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only">Tag2</span>' } },
{ label: 'tag3', value: { value: 'tag3', content: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only">Tag3</span>' } },
{ label: 'tag4', value: { value: 'tag4', content: '<span class="ui-button ui-state-default ui-widget ui-corner-all ui-button-text-only">Tag4</span>' } }
]

   // then in your success callback just feed the response and term back into the autocomplete.
   response( $.ui.autocomplete.filter( tags, term ) );
 }

[klaasruysschaert]

Thank you so much for your reply. I'm trying to implement your suggestion. I get the response from the web service (php) but I can't feed it back to the autocomplete.

callback: function( term, response ) 
     {
     console.log( "# callback with term '" + term + "'" );
     $.ajax({  
          url: "path-to-the-php",  
          data: { term : term },  
          success: function(data)
          {
               var tags = data;
               console.log(tags); /* see below */
               response($.ui.autocomplete.filter(tags, term));
           }  
     });
}

and this is the response I get

[ { label: 'tag1', value: { value: 'tag1', content: '<span>Tag1</span>' } },
{ label: 'tag2', value: { value: 'tag2', content: '<span>Tag2</span>' } },
{ label: 'tag3', value: { value: 'tag3', content: '<span>Tag3</span>' } },
{ label: 'tag4', value: { value: 'tag4', content: '<span>Tag4</span>' } } ]

Really suffering on this... :)

[Yermo]

This looks correct to me.

Are you getting any errors in the javascript error console?

What version of jQuery and jQuery UI are you using?

[klaasruysschaert]

Thank you for your response. jQuery and jQuery UI are the same as in your demo page. Weird things going on... It works fine with this:

success: function(tags)
          {
          tags = ['tag1','tag2','tag3'];     
          response($.ui.autocomplete.filter(tags, term));
          }

But is won't work with this:

success: function(tags)
          {
               response($.ui.autocomplete.filter(tags, term));
          }

The only code in my web service php is this:

echo "['tag1','tag2','tag3']";

:'(

[Yermo]

check typeof( tags ). I bet you'll find that it's a string and not an object.

[Yermo]

You probably need to add dataType: 'json' to your ajax call.

[klaasruysschaert]

Ooooh Yermo! You rock! A simple eval turned my misery into your magic! Thank you so much! :+1:

[Yermo]

You're welcome. Let me know if you run into any problems. If your project is ever publicly visible I'd love to take a look at what you're working on.

[klaasruysschaert]

Will do. Thanks again!