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.

What is the expected behavior anyways when you have `minLength:0`? — kralco626, Jan 05 '11 at 13:01
Basically, you want all available results to pop up when you focus on the autocomplete field? — karim79, Jan 05 '11 at 13:02
Well, not exactly, but yes. Did I confuse you? I want all results the service returns to pop up. However, this may or may not be all possible results. For instance if my service ranks all remaining possible results and displays only the top ten, It would not display all possible results, but, yes the auto complete would display all results returned to it by the web service... I hope that made sense... :) — kralco626, Jan 05 '11 at 13:06
If you leave off the second parameter to the `search` invocation, it will use the value from the field (i.e. do not include the empty string): `.focus(function() {$(this).autocomplete("search");});` (jQuery's documentation on this operation seems to imply the empty string works, but specifying no parameter works instead) — Dan Fleet, May 26 '11 at 03:06

score 67 · Accepted Answer · edited Mar 26 '15 at 14:41

67

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"/>

edited Mar 26 '15 at 14:41

Vishwanath

6,284
4
38
57

answered Jan 05 '11 at 13:04

karim79

339,989
67
413
406

so something like $("#myAC").onFocus("search","")? - EDIT: I guess your edit answers this question :) Thanks! – kralco626 Jan 05 '11 at 13:09
@kralco626 - just chain a `.focus` handler to the autocomplete initialisation, as in the above example and demo. – karim79 Jan 05 '11 at 13:11
@karim - do you have any idea why this is not implemented automatically when `minLength:0`? What other meaning than this can setting `mineLength:0` possibly mean? I mean, what else could the programmer want to happen that Jquery would not implement this by default? – kralco626 Jan 05 '11 at 13:13
@kralco626 - I'm really not sure. It would *seem* like the only purpose of `minlength: 0` would be to use it in conjunction with the search method, so it is surprising that `minlength: 0` does not do that automatically. – karim79 Jan 05 '11 at 13:18
@karim - I suppose that having `minLength:0` would call the source when you type a single character and then click backspace, whereas `minLength:1` would not... Just seems like that's really not all that great. If your going to call the source when you type a character and then backspace, why cant you call it when it gains focus? Its going to be the same call either way... – kralco626 Jan 05 '11 at 13:18
1

@karmin - the only issue that I have is that when you click on one of the auto-complete options, it regains focus, which means that it opens the search thing again. suppose I could just have a `if(length of text in search box <= 0)` in the focus handler... that should do it... – kralco626 Jan 05 '11 at 13:25
I guess the search won't fire onfocus to prevent searching default values like: "Search here"... [link](http://jsfiddle.net/ifaour/rbVd4/) – ifaour Jan 05 '11 at 13:30
Hum, but generally arn't watermarks like that usually removed when the user clicks the input? At least mine are. As long as the function to remove the watermark runs before the function to do the auto-complete... idk... but ya that makes sense. – kralco626 Jan 05 '11 at 13:33
@karim - OK i'm having an issue. When I click an option from the auto-complete, it opens back-up but is resubmitting the empty string to the source rather than the new selected string. – kralco626 Jan 05 '11 at 13:39
@kralco626 - edited my answer. Maybe call the search method only if there is actually something in the input field? – karim79 Jan 05 '11 at 13:56
@kralco626 - hang on, I don't know if that makes a difference. – karim79 Jan 05 '11 at 14:01
@karmin - i'm thinking that maybe it's not an issue with this code; it might have something to do with the code to call the service and return it to the auto-complete. I think I fixed it, however it's now errering out if I don't return any data from the service. – kralco626 Jan 05 '11 at 14:05
1

@karmin - sorry, the underlying problem was not with your code. It was with my service, which was causing an issue when I did not return anything to the auto-complete. I fixed it and now your solution work beautifully :) – kralco626 Jan 05 '11 at 14:08
2

@karmin - i'm not sure why, but adding in the `if` statement actually **causes** the problem of the auto-complete opening up the results for the empty string again after selecting an option. Doesn't make any sense to me, but without the if it works perfect. With the if, if I click on the input box and select an option, the auto-complete puts the option i selected in the input box. but then shows be the options again as if the input was empty. – kralco626 Jan 05 '11 at 14:11
@kralco626 - reverted to the previous edit. Glad I could help :) – karim79 Jan 05 '11 at 14:15
I was looking for this exact solution. Thanks Karim! – Voodoo Feb 17 '11 at 23:33
This open on focus doesn't work well in IE. When I select item from autocomplete list, list doesn't hide itself. You have to use rasx's answer (disable-blur-enable). – Xdg Dec 25 '12 at 15:01
It shows all the options upon type somethig, focusout and focusin again. You should probably update it to: `$(this).autocomplete("search", this.value);` – iMatoria Jul 08 '13 at 06:40

score 7 · Answer 2 · answered May 08 '12 at 23:05

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', '');
});

Yes, this is must-have solution for Internet Explorer. – Xdg Dec 25 '12 at 15:03 — Xdg, Dec 25 '12 at 15:03

score 3 · Answer 3 · answered Jan 04 '12 at 20:02

I had the same problem, and solved it this way. I think the code below makes it much clearer what is the text that is sent to the autocompletion service when the field gets focus. In particular, it is clear why it works when the field already contains something.

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

score 2 · Answer 4 · answered Aug 14 '12 at 19:30

I had the same problem and I got how to workaround this issue.

The problem is that when an option has been selected the input will be focused, this will run search without any filter and will show the autocomplete again.

This problem doesn't happen when you select by keyboard because the input is already in focus, so the code which is inside focus will not run again.

So to workaround this issue we have to know when the focus is triggered by any mouse/keyboar event.

jQuery("input#autocomplete").focus(function(e) {
    if(!e.isTrigger) {
        jQuery(this).autocomplete("search", "");
    }
    e.stopPropagation();
});

e.isTrigger is used by jQuery to identify when event has been triggered automatically or by user.

working demo

score 1 · Answer 5 · answered Feb 29 '12 at 21:44

This actually works! Tested on IE, FireFox

$("input#autocomplete").autocomplete({
minLength: 0,
source: source,
}).focus(function() {
        setTimeout( "if ($('#input#autocomplete').val().length == 0) $('#input#autocomplete').autocomplete(\"search\", \"\"); ",1);
    });

score 0 · Answer 6 · answered Dec 22 '18 at 09:59

I know that this is a very old thread, but I am having the exact same problem, and none of the solutions provided above seem to work... I assume that this is because of updates in Jquery? If someone could post a working updated (i.e. jquery-1.12.4.js // 1.12.1/jquery-ui.js) example, that would be fantastic.

score 0 · Answer 7 · answered Nov 18 '11 at 20:50

0

the suggestion menu shows up for the second time because clicking on an item in suggestion menu causes text box to regain focus, however the text value is not updated when the focus is fired again.After the textbox regains focus, the suggestion menu is fired.

I dont know how we could fix this, but let me know if anyone of you are facing the similar problem

answered Nov 18 '11 at 20:50

PradGar

103
1
4

rasx' answer does the job well – Kodak May 16 '12 at 12:06

Jquery UI autocomplete; minLength:0 issue

7 Answers7

Linked