jQuery autocomplete search and select programmatically

Question

I have a data from my controller and when the page loads I want the autocomplete input to search for that data and select it.

I am able to search the data using:

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

above code works and showing the correct value of autocomplete. Now I cant select the value so that the autocomplete input triggers change. I wanted the input to trigger change because I will auto populate some input.

The way I select the value pro grammatically is :

select: function( event, ui ) {}

Now i found this:

search: function( event, ui ) {},

Is is possible to combine the two?

How to select searched data from auto complete programmatically ?

Update:

This is how my autcomplete works:

$( ".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;
      }
    });

The reason why I wanted select event is to populate some input as shown in the source

Answer 1

You simply do jQuery.val() on the input element, like so.

Edit

Since you seem to want to trigger the selection after an asynchronous data retrieval, you probably want the response event and perform the selection there.

response (event, ui)

Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled

$(".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 and select are the events which get triggered when the search is taking place. You don't execute them.

Additionally, I believe the method search (not the event one) is meant rather for "suggesting" users that a value/tag exists in the list and that they need to select it themselves. So, yes, if you need a value programmatically selected (without user interaction) you might need to do it by .val() and optionally .trigger().