Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery UI autocomplete; minLength:0 issue

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.

like image 750
kralco626 Avatar asked Jan 05 '11 12:01

kralco626


2 Answers

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"/>
like image 135
karim79 Avatar answered Oct 16 '22 23:10

karim79


I understand through experiment why the accepted answer (I up-voted) can be considered slightly incomplete. I've added a little bit of intent to make the UX more combo-box-like:

$('#Carrier').autocomplete(
{
    source: '@Url.Action("AutocompleteCarrier", "Client")',
    minLength: 0,
    select: function (event, data) {
        $(this).autocomplete('disable');
    }
})
.blur(function(){
    $(this).autocomplete('enable');
})
.focus(function () {
    $(this).autocomplete('search', '');
});
like image 7
rasx Avatar answered Oct 16 '22 22:10

rasx