Autocomplete lijst verticaal weergeven i.p.v. horizontaal
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
Code (php)
1
2
3
2
3
<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 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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
$(function() {
$( "#medicinename" ).autocomplete({
source: 'includes/search_medicinename.php'
});
});
$(function() {
$( "#genericname" ).autocomplete({
source: 'includes/search_genericname.php'
});
});
</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:
Code (php)
1
2
3
4
5
2
3
4
5
.ui-autocomplete {
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
}
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
}
Hopelijk kan iemand mij helpen.
Toevoeging op 28/08/2017 10:36:43:
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:
Code (php)
1
<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:
Code (php)
1
2
3
4
5
2
3
4
5
.ui-autocomplete {
max-height: 300px;
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
}
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
<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:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
}
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...
En ik vraag me af welke versie van Jquery autocomplete heb ik nodig voor enkel autocomplete? Ik heb reeds op hun website gekeken, maar om eerlijk te zijn door de bomen zie ik het boos niet meer...
Je geeft heel veel input, maar eigenlijk geef je ook geen input.
Wat is de output van "source: 'includes/search_medicinename.php'"
Je gaat namelijk van de hak op de tak, terwijl het slechts een CSS weergave is ( als je het aan mij vraagt ).
Geef eens een concreter voorbeeld, heb je iets online staan?
Gewijzigd op 29/08/2017 10:00:46 door E vH
Je kunt het live zien, wat ik allemaal bedoel dat de weergave van de autocomplete lijst niet klopt.
URL: hawarco.co
credentials: [email protected]
test1
Laat je weten als je het heb gecheckt?
Toevoeging op 29/08/2017 10:34:48:
Hallo - Ariën -,
Ik wil ook jQueryUI gebruiken en welke versie kan ik het beste gebruiken voor auto complete?
En heb ik alle componenten nodig, die eronder worden aangegeven op http://jqueryui.com/download/#! ?
En als laatste vraag; volgens mij is het beter om de bestanden van jQueryUI op eigen hostingserver te plaatsen i.p.v. te linken naar hun bestanden, toch?
Tnx! en volgens mij is het toch beter om deze bestanden zelf te hosten i.p.v. te linken naar hun bestand toch vanuit je pagina's? Dit lijkt me beter voor o.a. meer controle.
Ik vraag me of ik autocomplete opnieuw zal implementeren of wachten op feedback van Elmar vH...
Dit is wat ik precies krijg wanneer autocomplete werkt bij mij.
Het resultaat wordt niet verticaal weergegeven, maar als een texarea box dat naar rechts schuift naarmate het voller wordt. En ik wil juist dat het resultaat als een lijst wordt weergegeven en dat je kan scrollen naar beneden door de resultaten...
Snap je nu wat ik bedoel?
Gewijzigd op 29/08/2017 14:30:55 door - Ariën -
http://hawarco.co/img/print%20screen.png
Maar je wilt dus gewoon dat er onderaan je inputbox een lijst komt te staan? Dus het standaard gedrag?
Gewijzigd op 29/08/2017 14:32:09 door - Ariën -
En niet perse onderaan de inputbox, maar gewoon in hetzelfde inputbox of is dat moeilijk te realiseren?
Dan hoef je alleen je gemaakte wijzigingen terug te draaien.
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
<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>
Gewijzigd op 29/08/2017 15:03:03 door Mohamed nvt
Misschien dat je nu iets hebt dat in de lijn van CSS dit gedrag nu overerft?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
@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;
}
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...
Toevoeging op 29/08/2017 20:01:59:
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...
Gewijzigd op 29/08/2017 20:21:45 door Mohamed nvt
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...