Отображение списка автозаполнения jquery ui на фокусном событии

Question

вот мой код, что с ним не так?Похоже, он не отображает список в фокусе, мне все равно нужно нажать клавишу, прежде чем отобразится список

<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                    ],
            minLength: 0
        });
    }).focus(function(){            
            $(this).trigger('keydown.autocomplete');
    });
</script>


<input type="text" id="id">

Answer 1

Это напрямую вызывает метод поиска со значением по умолчанию, когда фокус.

http://jsfiddle.net/steelywing/ubugC/

$("input").autocomplete({
    source: ["Apple", "Boy", "Cat"],
    minLength: 0,
}).focus(function () {
    $(this).autocomplete("search");
});

Answer 2

Решение сделать так, чтобы оно работало более одного раза

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){     
            //Use the below line instead of triggering keydown
            $(this).data("autocomplete").search($(this).val());
        });
    });
</script>

Answer 3

Похоже, вы подключаете обработчик focus() к анонимной функции, а не к текстовому полю.

Попробуйте это:

<script type="text/javascript">
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function(){            
            // The following works only once.
            // $(this).trigger('keydown.autocomplete');
            // As suggested by digitalPBK, works multiple times
            // $(this).data("autocomplete").search($(this).val());
            // As noted by Jonny in his answer, with newer versions use uiAutocomplete
            $(this).data("uiAutocomplete").search($(this).val());
        });
    });
</script>

Answer 4

digitalPBK почти все правильно ...

Его решение работает несколько раз, но не закрывает выпадающий список, когда вы выбираете элемент из списка щелчком мыши.В этом случае фокус возвращается к элементу управления, когда вы делаете щелчок, поэтому он снова открывает список, когда должен его закрыть.

Вот исправление, и это единственное, что работает для меняЯ думаю, что это должно работать при использовании самой последней версии (1.8.11) функции autocomplete ().Когда элемент управления получает фокус, он не отображает все на фокусе, если выпадающий список уже показан ...

<script type="text/javascript"> 
    $(function() {
        $('#id').autocomplete({
            source: ["ActionScript",
                        /* ... */
                    ],
            minLength: 0
        }).focus(function () {
            if ($(this).autocomplete("widget").is(":visible")) {
                return;
            }
            $(this).data("autocomplete").search($(this).val());
        });
</script>

Answer 5

$(this).trigger('keydown.autocomplete'); не совсем у меня работает.

Вот что я сделал:

$('#id').on( "focus", function( event, ui ) {
    $(this).trigger(jQuery.Event("keydown"));
   // Since I know keydown opens the menu, might as well fire a keydown event to the element
});

Answer 6

В более поздних версиях вам может потребоваться изменить автозаполнение на uiAutocomplete

$(this).data("uiAutocomplete").search($(this).val());

Answer 7

Если вы хотите что-то изменить в jQuery UI, сделайте это в jQuery UI.

Использование jQuery UI Фабрика виджетов . Проще поддерживать, быстрее и чище, чем прикреплять события к элементу.

$.widget('custom.autocomplete', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

Answer 8

Это работает правильно.

$.widget('custom.autocomplete', $.ui.autocomplete, {
  options: {
    minLength: 0
  },
  _create: function() {
    this._on(this.element, {
      focus: function(event) {
        this.search();
      }
    });

    this._super();
  }
});

Answer 9

Общая цель автозаполнения заключается в том, чтобы выполнить при нажатии клавиши и на основе введенной нами буквы он будет часто выполнять поиск по шаблону и отображать результат.

Во всяком случае, из кода выше я могу видеть, что:

фокус (функция () {
$ (Это) .trigger ( 'keydown.autocomplete');

, который, как сказал Codesleuth, прикреплен к анонимной функции вместо Control.