代码

Question

我的jQuery UI自动完成无法正常显示：（

这是Html的代码：

<html>
<head>
<title>Site classificados</title>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css'/>
<link rel='stylesheet' href='css/css2.css'> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> 
<script src='js/js.js'></script>
</head>
<body>
<input type='text' align='center' value='".$query."' name='q'></input>
</body>
</html>

这是脚本的代码：

    <script>
var availableTutorials = [
               'ActionScript',
               'Boostrap',
               'C',
               'C++',
            ];
$('input').autocomplete({
        source: availableTutorials,
        minLength: 1
});  
</script>

每次我按“A”都不会显示动作脚本，同样对于B，不显示Bootstrap

我试过PHP制作一个Sql查询，但没有工作/显示。

Answer 1

你应该在输入元素中添加一个类或ID，我通常使用类，但有时特别是输入我使用ID。

你的$（'输入'）。自动完成。。。应更改为$（'#input'）。自动完成。。。或$（'。input'）。自动完成。此外，不需要minLength，因为默认值已经是“1”。

最后真正的问题是你没有把它放在一个函数中，所以页面看到了脚本，但它不知道如何处理它。

代码

HTML

<html>
<head>
<title>Site classificados</title>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css'/>
<link rel='stylesheet' href='css/css2.css'> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> 
<script src='js/js.js'></script>
</head>
<body>
<!--added the "ID" attribute to this input element and set the value to "input" for simplicity-->
<input type='text' align='center' value='".$query."' name='q' id="input"></input>
</body>
</html>

的JavaScript

$(function() { // add the start function script here
    var availableTutorials = [
        'ActionScript',
        'Boostrap',
        'C',
        'C++',
    ];
    $('#input').autocomplete({ // I put the #input here but you can 
                               // also put .input 
        source: availableTutorials,
        minLength: 1
    });
}); // end the function here

Answer 2

1- /检查你的链接（src =“....”）它在这里工作

<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
      $(function() {
        var availableTags = [

          'ActionScript',
          'Boostrap',
          'C',
          'C++',

        ];
        $("input").autocomplete({
          source: availableTags,
          minLength: 1
        });
      });

    </script>
  </head>

  <body>

    <div class="ui-widget">
      <input type="text">
    </div>


  </body>

</html>

jQuery UI自动完成没有显示

2 个答案:

代码

HTML

的JavaScript