javascript - Jquery UI autocomplete; minLength:0 issue

Question

I am using a JQuery UI auto-complete. I am specifying the min length. If I specify minLength:2 I need to type 2 characters before the service fires. If I specify minLength:1 then I only need to type one character before the source service fires.

However, when I specify minLength:0 I still need to type one character. So whats the point of 0? how is it any different than 1? The expected, and desired, behavior would be for it to fire as soon as the input has focus...?

Ideas?

Update: For the most part karim's solution below works, however when clicking on the input the options come up and when one is clicked the source is resubmitted the empty string rather than the new option that was just selected, so the auto-complete options that come up after selecting an option are than same as if the box had been empty.

question from:https://stackoverflow.com/questions/4604216/jquery-ui-autocomplete-minlength0-issue

Answer 1

Check out the search method documentation:

Triggers a search event, which, when data is available, then will display the suggestions; can be used by a selectbox-like button to open the suggestions when clicked. If no value argument is specified, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.

var source = ['One', 'Two', 'Three', 'Four'];

var firstVal = source[0];

$("input#autocomplete").autocomplete({
    minLength: 0,
    source: source,
}).focus(function() {
    $(this).autocomplete("search", $(this).val());
});

.ui-menu-item{
  background : rgb(215, 215, 215);;  
  border : 1px solid white;
  list-style-type: none;
  cursor : pointer;
}

.ui-menu-item:hover{
  background : rgb(200, 200, 200);
}


.ui-autocomplete{
   padding-left:0;
   margin-top  : 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<input id="autocomplete"/>&nbsp;<input id="submit" type="submit"/>