JQuery里面的js函数答案

【问题标题】：JQuery inside js functionJQuery里面的js函数
【发布时间】：2020-02-18 20:51:42
【问题描述】：

我正在使用 jquery 自动完成 ui，试图让它在用户单击文本框时自动打开菜单。当我在函数外使用$("#selector").autocomplete( "search" , "" ); 时，它按预期工作（当然，每次刷新只能工作一次）但是当我在函数内尝试它时，它什么也没做，我不知道为什么。

编辑：我也在与使用 jinja 的烧瓶管理员合作。

{% extends 'admin/model/list.html' %}
{% import 'admin/model/layout.html' as model_layout with context %}

{% if search_supported %}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="selector" onfocus="func()" />

<script>
$("#selector").autocomplete({
  source: ['test',"test2"],
  minLength: 0,
  autoFocus: true,
});

$("#selector").autocomplete( "search" , "" ); //this works

function func(){
 $("#selector").autocomplete( "search" , "" ); //this doesnt
}
</script>
{% endif %}

【问题讨论】：

为我工作：jsfiddle.net/barmar/mtnkd8jy/2
JavaScript 控制台有错误吗？
函数定义在$(document).ready()里面吗？内联 JavaScript 在全局范围内执行，因此无法访问嵌套函数。
欢迎来到 Stack Overflow！我建议确保您问题中的代码遵循常见的缩进做法。我想您会发现代码更容易让其他用户理解，并且更有可能生成有用的回复。 :)
我在浏览器控制台上没有错误，这与 JavaScript 不同吗？我不知道如何访问它（你的小提琴也适合我）

标签： jquery html jquery-ui

【解决方案1】：

我添加了一个事件侦听器来单击事件，您也可以将其更改为焦点事件，这会将所需的操作注册到您的输入... 这是一个工作的 sn-p 也处理 css，在 chrome、edge 和 firefox 中测试...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" id="selector" onfocus="func()" />
    <script>
$(document).ready(()=>{
    document.getElementById('selector').addEventListener('click', func)//hook the function the click event.
    $('#selector').val('')//to make sure the input is empty on page reload...
})
$("#selector").autocomplete({
  source: ['test', "test2"],
  minLength: 0,
  autoFocus: true,
});

function func() {
    $("#selector").autocomplete("search", "")

}

    </script>
</body>
</html>

【讨论】：

我不得不编辑我的答案，因为我在第一次发布后完全明白了你的意思，
这在单独使用时有效，但是当我尝试在我的 .html 中使用相关代码时它不起作用。我也在使用烧瓶管理员，代码在 Jinja 块之间可能是问题吗？（{% if search_supported %} 代码 {% endif %}）
我相信您需要发布一段更好的代码描述，以便其他人能够以更好的方式生成代码并能够帮助您......
是的，我不认为烧瓶在错误中起作用。我已经更新了代码
尝试拆分您的代码，将您的 JavaScript 代码分隔在一个 js 文件中，然后在您的 html 中引用它

【解决方案2】：

我会试试这个。您需要确保您的脚本位于<head> 或<body> 的末尾，并用<script></script> 正确包装。

$(function() {
  $("#selector").autocomplete({
    source: ['test', "test2"],
    minLength: 0,
    autoFocus: true,
  }).focus(function(e) {
    $(this).autocomplete("search", "");
    return false;
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input type="text" id="selector" />
</div>

【讨论】：

对我不起作用，脚本已正确包装在标签中，但我使用的是flask-admin，所以我真的没有或跟...共事。我将编辑代码
@N1r0 看来您正在使用条件语句。当您查看页面的源代码（生成的 HTML）时，它是否包含您的 JavaScript 代码？ Flask 可能没有渲染它。
是的，它包含 js 代码和自动完成功能的第一部分，但问题是如果我尝试运行其中包含 JQuery 行的函数。我尝试将其他没有 JQuery 的东西放在函数中进行测试，例如更改条形的颜色或更改值，并且确实有效。
@N1r0 所以你看到任何控制台错误？这表明 jQuery 库没有加载。