autocomplete slider weergeven

Door Furio Scripting op 15-07-2014 20:26

1.029 views

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.

Frank Nietbelangrijk

15-07-2014 20:35 gewijzigd op 15-07-2014 20:37

Met jqueryUI?


$( ".selector" ).autocomplete( "option", "minLength", 7 );

Furio Scripting

15-07-2014 20:36

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.

Frank Nietbelangrijk

15-07-2014 20:39

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

Furio Scripting

15-07-2014 21:14

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>

Frank Nietbelangrijk

15-07-2014 21:28 gewijzigd op 15-07-2014 21:30

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>

Furio Scripting

15-07-2014 21:46

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

Inloggen om te reageren