开发者

How do I align jQuery autocomplete properly?

开发者 https://www.devze.com 2023-03-10 05:03 出处:网络
This is most unusual. I\'m implementing jquery autocomplete on an input field on my site but the suggestions are not appearing under the input field as I type. Instead they are showing in the far righ

This is most unusual. I'm implementing jquery autocomplete on an input field on my site but the suggestions are not appearing under the input field as I type. Instead they are showing in the far right corner of the html document. Is there a special class that I need to apply here to make this work?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="js/css/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "F开发者_如何学JAVAortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];


        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
    <style>
        #main{
            width: 200px;
            margin-bottom: 200px auto;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="ui-widget">
            <input id="tags">
        </div>
    </div>
</body>
</html>


One thing I notice that's different on yours than mine is that we have set the textbox class to class="ui-autocomplete-input"


I fixed it. The jQuery version wasn't high enough. It needs to 1.5


.ui-autocomplete{
      left:632.5px !important;
      width:305px !important;
  }

Use this in your css to align your autocomplete. Change the left and width according to your needs

0

精彩评论

暂无评论...
验证码 换一张
取 消