如何正确对齐jQuery自动完成？

这是最不寻常的。我在我的网站上的输入字段上实现了jquery自动完成功能，但是当我输入时，这些建议不会出现在输入字段下。相反，它们显示在html文档的最右侧。我需要在这里申请一个特殊的课程来完成这项工作吗？如何正确对齐jQuery自动完成？

<!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", 
      "Fortran", 
      "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>

来源

2011-06-04 John

其他事情正在发生。我在Chrome，Firefox和IE7-8上试过你的代码。它在所有这些方面都得到了正确的对应。 – melhosseiny 2011-06-04 20:30:08

有一件事我注意到，对你的不同比我的是，我们已经设置文本框类类=“UI的自动完成输入”

来源

2011-06-04 19:37:23

试试看。没有工作:( – John 2011-06-04 19:39:16

也发现了这个：http://stackoverflow.com/questions/2560205/jquery-ui-autocomplete-positioning-wrong – 2011-06-04 19:40:47

我固定它。 jQuery版本不够高。它需要1.5

来源

2011-06-04 21:41:18 John

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

使用这个在你的CSS结合你自动完成。根据您的需要更改左侧和宽度

来源

2013-12-05 11:04:10

如何正确对齐jQuery自动完成？

回答

相关问题