0

As the Title suggests I want to be able to reduce the amount of suggestions that autocomplete recommends as i'm finding that even with minLength being set to 3 there are still far too many values being suggested. I have tried setting maxItemsToShow: and max: but neither have worked for me.

Ideally I'd like to be able to type in a few characters and have autocomplete suggest 5 values with a scroll bar to sift through the additional suggestions (if possible).

$(function() {
   $( "#step" ).autocomplete({
     source: '${g.createLink(controller: 'templateStep', action: 'suggestedStepValues')}',
     minLength: 3,
     max: 5
});

Any ideas on how to achieve this?

EDIT*

Here is my input field:

<div class="form-group col-md-3">
  <label for="step">
     <g:message code="templateStep.step.label" default="Step" />
  </label>
     <g:textField name="step" class="form-control" maxlength="250" required=""   value="${templateStepInstance?.step}"/>

 </div>

Here is my script function:

 $(function() {
  $( "#step" ).autocomplete({
   source: '${g.createLink(controller: 'templateStep', action: 'suggestedStepValues')}',
   minLength: 3
 });
Jamie
  • 73
  • 1
  • 13

1 Answers1

0

As per the documentation there is no parameter for this however, using the below CSS you can make the autocomplete box size fit your needs.

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

https://stackoverflow.com/a/7617449/3387421

JSFiddle: http://jsfiddle.net/whn1stde/

$(document).ready(function(){
   $( "#test" ).autocomplete({ source: [ "test","test2","test3","test4"]});
});
.ui-autocomplete { height: 45px; overflow-y: scroll; overflow-x: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<input type="text" id="test"/>
Community
  • 1
  • 1
Scott Harrison
  • 393
  • 4
  • 17
  • Is this altered in jquery-ui.min.css ? If so I've replaced the original with what you suggested but still no change. – Jamie Nov 24 '14 at 14:47
  • The code in my answer is CSS which limits the size of the autocomplete results box to being 200px in height (obviously you can change this). This would mean the user can now scroll inside this box at the results rather than having all of the results in one huge box. This code should be added to your CSS file – Scott Harrison Nov 24 '14 at 14:59
  • Yeah sorry I'm aware of what it does I'm just not sure where to place it. Currently my CSS for my Grails app is at web-app/css and then there is main.css mobile.css and jquery-ui.min.css I go into jquery-ui.min.css and I have pasted your line over the existing .ui-autocomplete{ line and still no difference was made. – Jamie Nov 24 '14 at 15:06
  • Without seeing your code there isn't much more I can suggest really. I would advise against editing jquery-ui.min.css though, if you place it in your main.css it should take precedence over the jquery-ui.min.css – Scott Harrison Nov 24 '14 at 15:41
  • I placed it in main.css yet no change occurred. – Jamie Nov 25 '14 at 10:04
  • I see, but i believe it's all coming down to where the CSS is being pulled from. I've edited the OP with my input field and script function. – Jamie Nov 25 '14 at 10:38
  • It could be a specificity issue with your CSS? http://css-tricks.com/specifics-on-css-specificity/ – Scott Harrison Nov 25 '14 at 10:43