Question

I’m trying to create a custom autocomplete combobox editor in the latest version of the SlickGrid. The main purpose of the combobox is to show the results based on the text typed by the user and also it will include a down arrow link-button which enables users to see all results by passing a blank argument to the ‘autoComplete’ function. Here is the link that you can view what I’m trying to create as a custom editor in SlickGrid. (Pls. ignore the “show underlying select” button)

I was able to get the suggestions based on the user typing and also a little arrow link-button is put on the right hand side of the column field that is supposed to show all items in the [availableTags] array. When I click the arrow, it doesn’t list all items basically not responding as it’s supposed to. But if user types something that matches with one of the items in the list, means the widget is open, after clicking the arrow button it gets closed but not bringing the list of all items.
I guess I’m doing something wrong with DOM handling. Any help would be gratefully appreciated.

Here is the source code of creating the columns.

    var columns = [
        {id: "TestAuto", name: "Auto Complete", field: "TestAuto", minWidth:100,width:150, editor: Slick.Editors.Auto}
      ];

Here is the custom Editor code:

$.extend(true, window, {
    "Slick": {
      "Editors": {
        "Auto": AutoCompleteEditor,
        "Text": TextEditor,
        "Integer": IntegerEditor,
        "Date": DateEditor,
        "YesNoSelect": YesNoSelectEditor,
        "Checkbox": CheckboxEditor,
        "PercentComplete": PercentCompleteEditor,
        "LongText": LongTextEditor,
        "Combo": ComboTest
      }
    }
  });
  var availableTags = [
                        "ActionScript",
                        "AppleScript",
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                      ];

  function AutoCompleteEditor(args) {
     var $input;
     var defaultValue;
     var scope = this;
     var calendarOpen = false;



     this.init = function () {

       $input = $("<INPUT id='tags' class='editor-text' />");
       $input.width($(args.container).innerWidth() - 25);
       $input.appendTo(wrapper);


       $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .appendTo( wrapper )
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "ui-corner-right ui-combobox-toggle" )

            .click(function() {

                // close if already visible
                if ( $input.autocomplete( "widget" ).is( ":visible" ) ) {
                    $input.autocomplete( "close" );
                    return;
                }

                // work around a bug (likely same cause as #5265)
                $( this ).blur();

                // pass empty string as value to search for, displaying all results
                $input.autocomplete( "search", "" );

                $input.focus();
            });

       $input.focus().select();
       $input.autocomplete({
            source: availableTags
        });

     };


     this.destroy = function () {
       $input.autocomplete("destroy");
     };

     this.focus = function () {
       $input.focus();
     };

     this.loadValue = function (item) {
       defaultValue = item[args.column.field];
       $input.val(defaultValue);
       $input[0].defaultValue = defaultValue;
       $input.select();
     };

     this.serializeValue = function () {
       return $input.val();
     };

     this.applyValue = function (item, state) {
       item[args.column.field] = state;
     };

     this.isValueChanged = function () {
       return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
     };

     this.validate = function () {
       return {
         valid: true,
         msg: null
       };
     };

     this.init();
   }

Answer 1

A short time after I posted this question, finally found the solution. In order to show all items listed in the suggestion box, the minLength must be set to 0 in the autoComplete definition of the input.

$input.autocomplete({
                delay: 0,
                minLength: 0, //has to be 0 to bring all items in case the search contains empty string.
                source: availableTags
            });

Sorry for those have been looking a solution for this kind of problems so long.