2014-10-11 99 views
0

我想将一个jQuery示例嵌入到应该自动完成自我的静态网页中。由于这是我第一次在前台工作,所以不知道我在哪里弄错了。jQuery自动完成脚本不解决

**出于某种原因自动完成功能不能正常使用**

Link which I am following

** **代码

<!DOCTYPE html> 
<htm lang="en"> 

<head> 
<script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script> 
$(function() 
{ 
    var availableTags = 
    [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++" 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="centered"> 

     <div> 
      <label for="tags"> Tags : </label> 
      <input id="tags"> 
     </div> 
    </div> 
</body> 
</html> 

是否有可能包括所有的链接和脚本的像下面还有其中order

<link rel="stylesheet" type="text/css" href="css/second_page.css" media="all"/>                                              <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>                       <script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> 
+0

你可能会错过jqueryui h TTP://jqueryui.com/download/all/ – n0mercy 2014-10-11 22:33:30

回答

0

在您的html头中包含

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 
1

jQuery是自动完成接口的基础库。正如所指出的那样,您必须将用于自动完成的UI库层添加到另外的到jQuery库中。而且,因为您正在尝试使用jQuery UI库,您还应该添加jQueryUI库所需的stylesheet

在本质上,这些都是你应该包括你的页面上的东西:

  • jQuery的
  • jQuery UI的
  • jQuery UI的CSS

下面是你的代码修改:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<title> Page Title </title> 
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> 


</head> 
<body> 
    <div id="centered"> 

     <div> 
      <label for="tags"> Tags : </label> 
      <input id="tags"> 
     </div> 
    </div> 
    <script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> 


    <!-- your code --> 
    <script> 
$(function() 
{ 
    var availableTags = 
    [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++" 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
}); 
</script> 

</body> 
</html>