Ik wil graag een scroller/slider weergeven bij mijn autocomplete veld welke resultaten ophaalt.

Nu wordt de lijst ontzettend lang en dit is irritant, dus ik wil graag dat die zo een slider weergeeft na zoveel resultaten... Hier kan je pagina bekijken: bekijk pagina om te zien wat ik bedoel, type "www." in en je ziet alle websites verschijnen.
Met jqueryUI?

$( ".selector" ).autocomplete( "option", "minLength", 7 );
Frank Nietbelangrijk op 15/07/2014 20:35:09

Met jquery?


Als dat het oplost vind ik het best. Trustpilot heeft wel zo een scrollbar die ik ook zoek, weet je hoe ik die erin kan verwerken? zie http://trustpilot.nl en typ dan iets van 2 letters, dan zie je veel resultaten met een scrollbar. In css zie ik niet veel verschillen met de mijne.
Je zegt dat je al een autocomplete veld hebt. Is die dan gemaakt met jqueryUI? Post anders even een stukje javascript die laat zien hoe je het nu doet
Frank Nietbelangrijk op 15/07/2014 20:39:40

Je zegt dat je al een autocomplete veld hebt. Is die dan gemaakt met jqueryUI? Post anders even een stukje javascript die laat zien hoe je het nu doet


Ik doe het nu inderdaad via jqueryUI. dit is de html:

 <form action='' class="form-default form-inline p-15" method='post'>
        <div class="input-group col-md-4 col-md-offset-4">
        <input class="form-control beoordelen-zoeken " id="auto" name="zoekTerm" type="text" placeholder="Zoek op website..." value="" autocomplete="off">
       <span class="input-group-btn">
        <button class="btn btn-two" name="zoekWebsite" type="submit">ZOEK!</button>
        </span>

        </div>
    </form>


Dit is de javascript:

<script>
        $(document).ready(function()
        {
           
            $('#auto').autocomplete(
            {
                source: "http://feedbackplatform.nl/includes/functions/beoordelen/search.php",
                minLength: 3,
                select: function(event,ui) {
                window.location = '/beoordelingen/'+ui.item.value;
        }
            });
            
           
        });
        
</script>
de css hieronder moet je dan toevoegen


  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
Frank Nietbelangrijk op 15/07/2014 21:28:37

de css hieronder moet je dan toevoegen


  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>



Hartelijk dank, werkt perfect!

Reageren