JQuery внутри js функция - PullRequest
Новая
       7

JQuery внутри js функция

0 голосов
/ 18 февраля 2020

Я использую интерфейс автозаполнения jquery, пытаясь заставить его автоматически открывать меню, когда пользователь нажимает на текстовое поле. Когда я использую $("#selector").autocomplete( "search" , "" ); вне функции, она работает как задумано (конечно, это работает только один раз за ссылку sh), но когда я пробую это внутри функции, она ничего не делает, и я не знаю почему.

РЕДАКТИРОВАТЬ: Я также работаю с flask -admin, который использует 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 %}

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

Я бы попробовал это. Вам нужно убедиться, что ваш скрипт находится в <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>
0 голосов
/ 19 февраля 2020

Я добавил прослушиватель событий для события щелчка, вы также можете изменить его на фокус-событие, которое зарегистрирует требуемое действие для вашего ввода ... вот рабочий фрагмент, обрабатывающий также css, протестированный в chrome, край и 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>
...