使用 jQuery .autocomplete 检索项目将不起作用，也不会引发任何错误

Posted 2023-05-08

【中文标题】使用 jQuery .autocomplete 检索项目将不起作用，也不会引发任何错误

【英文标题】：Retrieving items with jQuery .autocomplete won't work, nor throw any error

【发布时间】：2018-10-03 15:51:20

【问题描述】：

我正在尝试使 .autocomplete 工作，由于某种原因它没有显示任何应有的项目，并且控制台没有显示任何错误。

这是我的页脚：

（jquery-3.3.1.min.js 和 jquery UI 1.12.1）

<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" ></script>
<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script src="/js/tinymce.js"></script>
<script src="/js/autocompletar/autocompletar.js"></script>

这是我的 html 表单：

<div class="form-group ui-widget">
<label for="userName">Tags existentes</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
  <input type="tag" class="form-control" name="tag" id="tag" list="datalist">
</div>
  <div id="listado"></div>
</div>

这是我的 .js 文件

$(document).ready(function() 
    $( "#tag" ).autocomplete(
        source: 'autocompletarTags.php',
        appendTo: "#listado",
        minLength: 2
     );
);

我也试过了：

$(document).ready(function() 
    $(function()
    $( "#tag" ).autocomplete(
        source: 'autocompletarTags.php',
        appendTo: "#listado",
        minLength: 2
     );
    );
);

请注意文件 autocompletar.js 和 autocompletarTags.php 在同一个文件夹中。

//php function to connect to DB
conectar(); 

//get search term
$tag = $_GET['term'];

$tags = $tag.'%';

$x = $conectarDB->prepare("
  SELECT nombre FROM tags
  WHERE nombre LIKE ?
  ORDER BY nombre ASC
  ");
$x->bindParam(1, $tags);
$x->execute();

if ($row = $x->fetchAll(PDO::FETCH_ASSOC)) 
   foreach ($row as $value) 
        $data[] = $value['nombre'];
    


//return json data
echo json_encode($data);

$conectarDB = NULL;

关于为什么这不起作用的任何想法？我已经按照here 的说明进行操作，并且我认为我没有忘记任何步骤。

更新：每个js文件的网络面板状态为200。

UPDATE 2: json_encode($data) 的输出是[" tag2"," tag3"," tag4","demo","demo2","tag1"]（其实是预期的结果）

另一个更新：当 JS 脚本嵌入到文件中时它可以工作。 我没有将它作为文件引用添加到最底部，而是将 JS 脚本粘贴到文件的最底部，现在它可以工作了。

我已经检查并且引用的文件确实出现在页面的最底部（我已经检查了页面的来源），所以为什么它只在内联时才有效？

【问题讨论】：

网络面板在说什么？它发出请求了吗？响应状态码是什么？

没想到要检查一下，对不起，我已经更新了问题。获得-1票和结束票的问题还有什么问题？我是 JS 的新手，我不认为无缘无故投票结束是件好事。我认为问题中提供的信息是完整的。

$connectar = function()//blah ?或者真的是function connectar()//blah。如果是第二种方式，删除$

谢谢！多么愚蠢的错误。是的，它应该是 conectar()！谢谢。我已经改变了（我会更新问题，因为仍然不起作用）

你为什么使用JSON_HEX_APOS？你的$data 回报是什么？

【参考方案1】：

发现了问题，我将其发布在这里，以防将来对其他人有所帮助。

我的问题是我如何调用源代码。即使两个文件在同一个文件夹中，我也不应该只用文件名来调用它，而应该用文件夹来调用它。

所以，而不是：

source: 'autocompletarTags.php',

应该是：

source: '/my/folders/autocompletarTags.php',