CODEWITHSUNDEEP
tag-it
Wp3Dev
Wp3Dev

Reputation: 2079

Jquery tag-it autocomplete placement off

I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.

enter image description here

Here is my code: 

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8'/>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
        <link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
        <link rel='stylesheet' type='text/css' href='style.css'>
    </head>
    <body>



        <div class='container'>
            <h2> Tagging Functions </h2>
            <div class='row'>
                <div class='span5'>
                    <ul id="myTags">
                        <!-- Existing list items will be pre-added to the tags -->

                    </ul>
                </div>
            </div>
        </div>




        <!-- Scripts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
        <script scr='bootstrap/js/bootstrap.js'></script>
        <script src='js/main.js'></script>
    </body>
</html>

AND JS:

// Main JS
$(document).ready(function() {
  $("#myTags").tagit({
    availableTags:['me', 'you']
  });
});

Upvotes: 0

Views: 450

Answers (1)

Lordn__n
Lordn__n

Reputation: 328

It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.

A workaround could be to load jQuery 1.7.x and use jQuery.noConflict

This is my solution

//Save current jQuery
current_jquery = $.noConflict(true);

//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
    type: 'text/javascript',
    id  : 'jquery_173',
    src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});

//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);

//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;

//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});

Upvotes: 1

Related Questions