current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am using a jQuery plugin Tag-it to autocomplete the tags in the form input field. The plugin loads the available tags stored in an array.

$("#mytags").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});

I copied following function from the plugin's javascript code, I believe it is main function to load tags:

tag_input.autocomplete({
            source: options.availableTags, 
            select: function(event,ui){
                if (is_new (ui.item.value)) {
                    create_choice (ui.item.value);
                }
                // Cleaning the input.
                tag_input.val("");

                // Preventing the tag input to be update with the chosen value.
                return false;
            }
        });

The plugin works fine and autocomplete the tags from the availableTags array, however I would like to make a small change in it. Instead of loading the tags from the array, I would like to load tags from mySQL database table. The table has following structure:

tags:

tag_id      tag_name
1            c++
2            java
3            php
4            javascript
5            ruby

So How can I autoload the tag names from the database (using PHP) instead of loading from the above array? Thanks.

share|improve this question
    
Please don't ask the same question again. Re-word this question if you feel you're not getting your point across. Thanks. –  Kev Jul 22 '11 at 13:29
add comment

5 Answers

up vote 0 down vote accepted

Yes you can like:

Instead of 

source: options.availableTags

use this:

source: function(request, response) {
    var term = request.term // This will hold the text you typed in autocomplete
    $.get(url, data, function(data){
        // Build an array to return
        var dataToReturn = [];
    });
    response(dataToReturn);
}
share|improve this answer
    
thanks dude. Could you please give an example of PHP code to, and also this about the variable url, you used in get function. –  Roman Jul 21 '11 at 9:30
    
Here's a working example http://jsfiddle.net/enqQW/. I am not a php guy, so sorry cannot help. This example is not from remote source but can be converted easily. Hope this helps!!! –  Ashish Jul 22 '11 at 6:33
    
I get the following dataToReturn is not defined [Break On This Error] response(dataToReturn); –  Roman Jul 22 '11 at 20:09
    
Did you see my jsFiddle code. Its not related to dataToReturn. –  Ashish Jul 23 '11 at 2:19
add comment
up vote 0 down vote

This plugin seems to be based on jQuery UI Autocomplete, so the source parameter in your code may be either an array, a string or a callback. Please refer to

http://jqueryui.com/demos/autocomplete/#remote

for the appropriate documentation. Basically, you can put in a string with a url to your serving script, which parses the $_GET['term'] assigned by the plugin and returns an array of your tags.

share|improve this answer
add comment
up vote 0 down vote

You could use PHP to dynamically build up the - 

$("#mytags").tagit({
    availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
});

JavaScript code. This blog entry contains a function that should be roughly what you need.

share|improve this answer
add comment
up vote 0 down vote

Look at the example for using a remote datasource. The source parameter is the name of a php script which is doing a MySQL query and returning the data.

share|improve this answer
add comment
up vote 0 down vote

I solved the same issue with the following code:

$('#tags').tagit({
    tagSource: function(request, response) {
        var term = request.term;
        $.get("/suggestTags?term=" + term, function(data){
            var dataToReturn = data;
            response(dataToReturn); 
        });
    }
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.