3

EDIT: I'm not sure if anybody else has this problem, but here is how I solved it. My JSFiddle did work, and the data was displayed, but it wasn't selectable (on my localhost, where I got the data with JSON). I fixed it by changing the html code to the following:

<select class='candidateTags' id='candidateTags' data-placeholder='begin met typen voor suggesties' multiple='multiple' style='width: 200px;'></select>

So basically, I changed the input type hidden to select, and I added name='multipleTagids[ ]' to the select field.

If anybody else has this problem, then now you know how to fix it.

I know this question has been asked a lot (among others: here, here and here)

But the problem I'm having is that I'm getting data from a database and then encoding it with PHP to make a JSON object. This all works perfectly fine.

Select2 then uses the results to autocomplete enter image description here

The problem is that when I try to click on one of the tags, the tag is not selected. When I click it, it just closes the autocomplete list.

Here's my select2 code:

<script>
$(document).ready(function() {
    // set select option to be select2, and add a placeholder
    $('.candidateTags').select2({
        ajax: {
            url: 'snippets/gettags.php',    // the url that AJAX should access
            dataType: 'json',               // datatype that's received
            data: function (term, page) {
                return term;
            },
            id: function(obj) {
                return obj.slug;
            },
            results: function (data, page) {
                return {results: data.results};
            }
        }
    });
});
</script>

I am using the id, but it doesn't work. I also tried not including this id part, but it still didn't work.

JSON is returning this:

{"results":[{"id":"1","text":"Project medewerker"},{"id":"2","text":"Vakkenvuller"},{"id":"3","text":"Developer"}]}

And here's the html:

<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post">      
    <label>
        <span>Tag(s):</span>
        <!-- Set a select option for the tags. Will be filled with jQuery onkeyup='suggestTags(this.value)' -->
        <input type='hidden' class="candidateTags" name='multipleTagIds[]' id='candidateTags' data-placeholder='Begin met typen voor suggesties' multiple='multiple'>
    </label>        

    <input type="submit" name="submit" class="submitbutton" value="VERSTUREN" >
</form>
Community
  • 1
  • 1
Spyron10
  • 150
  • 9
  • I've tested your JSON and your ajax and it is working (selecting the tag) as is. You might have some CSS or hidden element that is over your tags. When you move the mouse over the dropdown options, do you see the blue background? – Luís Cruz Mar 02 '15 at 12:35
  • I don't think I have any CSS over it, but I'll take a look at it. I do see the blue background when i hover, the image I provided was a screenshot. I took a look at the option values that select2 creates, but I'm not sure if this is wrong or right: http://i.imgur.com/h9yOLZy.png – Spyron10 Mar 02 '15 at 14:06
  • The input seems ok. I've created a [jsfiddle](http://jsfiddle.net/milz/f2ec5s5v/) with the json object and it works. Try to make a jsfiddle that replicates your issue so I can provide further assistance. – Luís Cruz Mar 02 '15 at 15:03
  • Here's the jsfiddle: http://jsfiddle.net/093y0ky9/ For some reason, I can now select one tag, but still I can't select multiple. It just might be one of my own CSS lines interfering with the select2 code. – Spyron10 Mar 02 '15 at 15:33

0 Answers0