JQuery автозаполнения поиска и выбора программно

Question

У меня есть данные от моего контроллера, и когда страница загружается, я хочу, чтобы автозаполнение ввода отыскивало эти данные и выбирало их.

Я могу искать данные, используя:

$( "#autocomplete" ).autocomplete( "search", '<?=$ID?>' );

код выше работает и показывает правильное значение автозаполнения. Теперь я не могу выбрать значение, чтобы триггеры автозаполнения ввода изменились. Я хотел, чтобы вход инициировал изменение, потому что я автоматически заполню некоторые входные данные.

Способ, которым я выбираю значение программно:

select: function( event, ui ) {}

Теперь я нашел это:

search: function( event, ui ) {},

Возможно ли совместить два?

Как программно выбрать искомые данные из автозаполнения?

Обновление:

Вот как работает мой автозаполнение:

$( ".updatedautocomplete" ).autocomplete({
      source:function(request,response){
         var $this = $(this);
         $.post("url",{
            term:request.term
         }).done(function(data, status){
            response($.map( data, function( item ) {
                return {
                    data
                }
                return false; // Prevent the widget from inserting the value.
            }));

        });
      },
      select: function( event, ui ) {
         $( this ).attr( 'data-value' , ui.item.id );
         $( this ).attr( 'data-asd' , ui.item.sad );
         $( this ).val( ui.item.label );
         $( "#modal" ).val( ui.item.qwe.trim() );
         $( "#modal" ).val( ui.item.asd.trim() );
         $( "#modal" ).val( ui.item.zxc.trim() );
         $( "#modal" ).val( ui.item.ert.trim() );
         $( "#modal" ).val( ui.item.dfg.trim() );
        return false;
      }
    });

Причина, по которой я хотел выбрать событие, заключается в заполнении некоторого ввода, как показано в источнике

Answer 1

Вы просто делаете jQuery.val() на элементе ввода, вот так.

Редактировать

Поскольку вы, похоже, хотите инициировать выбор после асинхронного извлечения данных, вам, вероятно, нужно событие response и выполнить выбор там.

ответ (событие, пользовательский интерфейс)

Срабатывает после завершения поиска, до отображения меню. Полезно для локальных манипуляций с данными предложений, когда обратный вызов пользовательской опции источника не требуется. Это событие всегда инициируется, когда поиск завершается, даже если меню не будет отображаться из-за отсутствия результатов или автозаполнение отключено

$(".updatedautocomplete").autocomplete({
  source: function(request, response) {
    var $this = $(this);

    //$.post("url", {
    //  term: request.term
    //})
    //.done(function (data, status) {
    //  response($.map(data, function (item) {
    //      return {
    //        data
    //      }
    //      return false; // Prevent the widget from inserting the value.
    //    }));
    //
    //});

    // Simulates some data returned from server
    response([
      { label: "Javascript", value: "js" },
      { label: "CSharp", value: "cs" },
      { label: "PHP", value: "php" }
    ]);
  },
  response: function(event, ui) {
    // Make your preferred selection here
    var item = ui.content[0].label;

    $(this).val(item).trigger('change');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input class="updatedautocomplete" />

search и select - это события, которые запускаются во время поиска. Вы их не выполняете.

Кроме того, я считаю, что метод search (а не событие) предназначен скорее для «предложения» пользователям о том, что значение / тег существует в списке и что им необходимо выбрать его самостоятельно. Так что, да, если вам нужно программно выбранное значение (без взаимодействия с пользователем), вам может потребоваться сделать это с помощью .val() и, необязательно, .trigger().