how to display a default list of data when focusing a jquery-autocomplete input

Question

I'm using JQuery autocomplete for listing product items and it is working fine.But i want to add a functionality that list all product on focusing that input before user type. here is the jquery code.

    $(".select_item").focus(function(){ // this is the input want to list when focus
        console.log("select item focused");
        let id = "select_item"
        let url = "' . $selectitem . '"
        autoSuggest(id,url);
    });

    // another inputs also used the functionality that is why it is generalised as autoSuggest
    function autoSuggest(id,url){ 
        var destination = url;
        
        $("."+id).autocomplete({
            source: function(request,response){
                $.ajax({
                    url: destination,
                    type: "POST",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    success: function( data ) {
                        if(!data.length){
                            console.log("no data");
                        }else{
    
                            response( data );
                        }
                        console.log(data);
                    },
                    error:function( data ) {
                        console.log(data);
                        
                    }
                });
            },
            // focus: function( event, ui ) {
            //  alert("Focus Event Triggered");
            // },
            select: function (event, ui) {
                
                // Set selection
                
                    // display the selected text
                if(id =="customer-name"){
                    $("."+id).val(ui.item.label);
                    $("#customer_id_val").val(ui.item.id);
                    getcustomervalues( ui.item.id);
                }
                if(id =="select_item"){ // listing product
                    var this_ = $(this);
                    this_.closest("tr.rowacc").find(".select_item").val(ui.item.label);
                    this_.closest("tr.rowacc").find(".item_id").val(ui.item.id);    
                    this_.closest("tr.rowacc").find(".product_id").val(ui.item.id);
                    getitemvalues( ui.item.id,this_);
                }
                if(id == "select_store"){
                    this_.closest("tr.rowacc").find(".store_id").val(ui.item.id);
                }
                return false;
            },
            scroll: true,
        });
                
            
    }

this is working fine when user type on the input.but not showing anything on focus.

here is the controller

public function actionSelectitem()
{
    if ($_POST['term'] != null) {

     $itemnameselect = Products::find()->select(['id', 'item as label'])->where(['like', 'item', $_POST['term'] . '%', false])->asArray()->all();
   
    } else {
     $itemnameselect = Products::find()->select(['id', 'item as label'])->asArray()->all();
    }
    return json_encode($itemnameselect);

}

How to display a all products as default list when user focus the input? regards

Answer 1

You can set minLength: 0 (because default value is 1) and force search on focus if autocomplete value is blank $("#tags").autocomplete("search", "");.

Here the working example:

$(function() {

  var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy"];

  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  });

  $("#tags").on('focus', function() {
    if ($("#tags").val() == '') {
      console.log('is empty, force search with blank terms...')
      $("#tags").autocomplete("search", "");
    }
  });

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>