PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

Autocomplete lijst verticaal weergeven i.p.v. horizontaal

Door Mohamed nvt op 27-08-2017 21:23
5.718 views
Hallo allemaal,

Zoals het onderwerp aangeeft, wil ik graag dat de autocomplete de lijst met gegevens verticaal weergeeft i.p.v. horizontaal zoals dat nu gebeurt.

Momenteel gebruik ik jQuery autocomplete op 2 input field op hetzelfde pagina en later worden het 3 input field.
De autocomplete werkt prima, maar de weergave wil ik verticaal hebben.

De volgende versie van autocomplete gebruik ik

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


In het header pagina heb ik dus staan:

<script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>


Ik heb reeds gezocht op het net en kwam veel zogenaamde oplossingen tegen, maar dit werkt dus niet.
Daarbij wordt aangegeven dat ik d.m.v. CSS het probleem kan oplossen en ik heb de volgende code gebruikt in mijn CSS-code en helaas biedt dat geen soelas:


.ui-autocomplete {
    max-height: 300px;
	overflow-y: auto;   /* prevent horizontal scrollbar */
	overflow-x: hidden; /* add padding to account for vertical scrollbar */
}

Hopelijk kan iemand mij helpen.

[size=xsmall]Toevoeging op 28/08/2017 10:36:43:[/size]

Update 1:
Ik ben verder gaan zoeken voor een oplossing voor dit probleem, want ik wil het heel graag oplossen ;-)
Ik zie dat bij autocomplete een css-link hoort, nl:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Wanneer ik dit link verwijder in mijn header.php pagina en aan mijn eigen CSS-bestand voeg ik dan:

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
}

Dan gebeurt er nog steeds niet veel. Sterker nog de weergave van autocomplete ziet er nog vreemder uit zonder het bijbehorende css link. En het lijkt erop dat autocomplete mijn eigen CSS bestand negeert, terwijl de volgorde goed staat.
Er staat nu in mijn header.php pagina:

<link href="../includes/main.css" rel="stylesheet" type="text/css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>

Er wordt eerst mijn CSS-bestand geladen en daarna komen de autocomplete bestanden. En ik heb gezien in hun eigen CSS bestand een CSS-class voor .ui-autocomplete met de volgende eigenschappen:

.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}

Mijn vraag is dus hoe kan ik ervoor zorgen dat autocomplete de weergave van gegevens verticaal laat zien ipv horizontaal...
Ariën
29-08-2017 14:28
Als je wilt scrollen, dan moet je toch de standaard manier gebruiken?
Ariën
29-08-2017 14:30 gewijzigd op 29-08-2017 14:32
Klopt, die link wou ik ook fixxen. En dan blokkeert je bericht.
Maar je wilt dus gewoon dat er onderaan je inputbox een lijst komt te staan? Dus het standaard gedrag?
M
Mohamed nvt
29-08-2017 14:41
Jah eigenlijk wel. Dus standaard gedrag ;-)
En niet perse onderaan de inputbox, maar gewoon in hetzelfde inputbox of is dat moeilijk te realiseren?
Ariën
29-08-2017 14:45
Je gaf toch al aan dat je de autocomplete in jQuery(UI) gebruikte. Die werkt standaard toch al zo.
Dan hoef je alleen je gemaakte wijzigingen terug te draaien.
M
Mohamed nvt
29-08-2017 14:48 gewijzigd op 29-08-2017 15:03
Volgens mij gebruik ik ook jQueryUI, maar weet niet zeker helemaal.
En btw; ik heb geen wijzigingen aangebracht.
En als het reeds jQueryUI is, dan werkt het blijkbaar niet standaard bij mij, zie het plaatje of test even zelf met de eerder gemelde credentials..

In mijn header.php heb ik de volgende code staan:


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>
Ariën
29-08-2017 15:03
Als je de CSS-bestanden als eerste inlaadt, dan zou je gewoon het standaardgedrag moeten hebben.
Misschien dat je nu iets hebt dat in de lijn van CSS dit gedrag nu overerft?
M
Mohamed nvt
29-08-2017 15:27 gewijzigd op 29-08-2017 20:21
De volgorde van CSS bestanden heb ik nu veranderd naar:


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<link href="../includes/main.css" rel="stylesheet" type="text/css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#medicinename" ).autocomplete({
      source: 'includes/search_medicinename.php'
    });
  });
  $(function() {
    $( "#genericname" ).autocomplete({
      source: 'includes/search_genericname.php'
    });
  });
 </script>

Zoals je ziet, wordt css jQueryUI CSS geladen en daarna komt mijn eigen CSS, maar dit hielp ook niet helaas.
En mijn eigen css ziet als volgt uit:


@import url("reset.css");
body {
	margin-top: 0px
	}
#wrapper {
	border:solid 1px;
	border-color:#000000;
	width: 90%;
	margin: 0 auto;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#header {
	height: 250px;
	padding: 3px;
	background-image: url(../img/bgheader3.jpg);
	background-repeat: no-repeat;
}
#content {
	
	
}
#navigation {
    float: left;
    height: 51px;
    width: 100%;
    background: #FFCC33;
}
#nav{
	float: left;
	}
#search {
	float: left;
	width: 20%;
	padding-top: 25px;
	}
.search{
	display:inline-block;
	}
#profile{
	float: right;
	width: 20%;
	height: 50px;
}
.login {
	text-align: right;
	padding-right: 10px;
	margin: 0px;
}
ul { 
	list-style: none; 
	}
    ul li { 
    float: left; 
	padding-right: 1px; 
	position: relative; 
	}
    ul a { 
	display: table-cell; 
	vertical-align: middle; 
	width: 150px; 
	height: 50px; 
	text-align: center; 
	background: #69C; 
	color: #fff; 
	text-decoration: none; 
	}
	
    ul a:hover { 
	background: #09C;
	font-weight: bold;
	text-decoration: underline;
	width:150px;
	}
    li > ul { 
	display: none; 
	position: absolute; 
	left: 0; 
	top: 100%;
    
	}
    li:hover > ul { 
	display: block; 
    opacity: 0.8;
	}
    li > ul li { 
	padding: 0; 
	padding-top: 1px; 
	}
    li > ul li > ul { 
	left: 100%; 
	top: 0px; 
	padding-left: 1px; 
	}
    li > ul li > ul li { 
	width: 100px; 
	}
    li:hover > a { 
	background: #09C; }
    /*
      1. Get & set the width of your nav (inc. 1px padding-left)
      2. Set the margin to auto (automatically centering the div to the parent, in this case, <body>)
      3. Set overflow to visible (not needed, just a precaution to stop scrolling)
    */
    #nav { width: 50%; overflow: visible; }
#second-content{
	clear: both;
	border: dashed 1px;
	}
.button{
	background-color:#4CAF50;
	border: none;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 24px;
	margin-top: 20px;
	margin-left: 150px;
	margin-bottom: 20px;
	pointer-events: none;
	color: white;
	border-radius: 4px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.buttontwo{
	float: right;
	background-color:#4CAF50;
	border: none;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	margin-top: 20px;
	margin-left: 150px;
	margin-bottom: 20px;
	pointer-events: none;
	color: white;
	border-radius: 4px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.monthviewtekst, .expiretekst {
	margin-left: 45px;
	margin-top: 45px;
	margin-bottom: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	
}
.expireform{
	margin-left: 45px;
	margin-bottom: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
fieldset {
	width: 53%;
}
legend {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	background-color:#4CAF50;
	color: #ffffff;
	border: 1px solid #ffffff;
}
label {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 25px;
}
table {
	border-collapse: collapse;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 92%;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	margin-left: auto;
	margin-right: auto;
}
caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-bottom: 10px;
}
tr:nth-child(even) {
	background-color: #f2f2f2;
}
table, td {
	border: solid thin #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
td {
	border-bottom: none;
	border-left: none;
	border-right: solid 1px grey;
	text-align: left;
	padding: 8px;
}
th {
	border: solid 1px #AFAFAF;
	text-align: left;
	height: 40px;
	background-color: #4CAF50;
	color: #ffffff;
	width: 5%;
	text-align: left;
	padding: 8px;
}
.monthtable, .expiretable{
	border-collapse: separate;
	border-spacing: 0px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
}
.monthtable {
	
}
#footer {
	clear:both;
	border-top:solid 1px;
	height: 51px;
}
.footertekst {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	padding-top: 25px;
}

Eigenlijk niet veel bijzonder...

[size=xsmall]Toevoeging op 29/08/2017 20:01:59:[/size]

Hallo - Ariën -,

Ik heb jQueryUI gedownload met autocomplete widget, en heb vervolgens uitgepakt:

URL: http://hawarco.co/img/print_screen.png
En nu vraag ik me af welke bestanden ik moet allemaal uploaden naar het hostingsbedrijf voor de werking van autocomplete?
En nog belangrijker: naar welke bestanden moet ik in mijn header.php precies naar linken?
Op http://jqueryui.com/autocomplete/ staat er een voorbeeld en daarin wordt naar 3 bestanden verwijzen, nl: 1x jQueryUI.js, 1x jQueryUI.CSS en 1x jQuery.js en ik heb nu alleen maar jQueryUI.js of jQueryI.CSS, nadat ik het heb uitgepakt...
Ariën
29-08-2017 21:28
Je hebt ook jQuery nodig. Omdat jQueryUI een uitbreiding erop is.
M
Mohamed nvt
29-08-2017 21:36
Hallo - Ariën -,

Het is mij gelukt om jQueryUI - autocomplete vanaf scratch te maken en het werkt. Helaas loop ik nog steeds tegen hetzelfde probleem aan, nl dat de resultaten niet scrolable worden weergeven.
De oorzaak heb ik ook kunnen achterhalen en dat is nl mijn eigen CSS-style bestand. Wanneer ik dit uitschakel, dan worden de resultaten van autocomplete wel scrolable weergeven.

Het insertformulier, waar de input field gebruik maakt van autocomplete, bevat een table. En, ik heb alle CSS regels voor tabel uitgeschakeld, maar helaas het hielp niet.

Zou je of iemand een kijkje willen werpen op mijn eigen CSS-bestand hierboven om te kijken welke regels in conflict zijn met autocomplete CSS.
Overigens, de volgorde heb ik als volgt:
Autocomplete CSS
Wat extra eigenschappen van autocomplete
Mijn eigen CSS
Helaas helpt dit allemaal niet...

Reageren

Inloggen om te reageren