Globe Media
Search…
Auto complete destination widget
A simple widget that can be placed on webpage - demo can be found here http://data.wordtravels.com/static/demo/wt-auto.html
How to do it
Embed the following code into your webpage:
1
<link href="https://cdn.jsdelivr.net/gh/cherryblossom111cc/wordtravels/destination-auto-complete/static/css/main.v1.0.4.css" rel="stylesheet"/>
2
<div id="wt-auto-complete-v1" data-agentcode="abc" data-mode="iframe" data-showlogo="true" data-highlightColor="#663399"></div>
3
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/cherryblossom111cc/wordtravels/destination-auto-complete/static/js/main.v1.0.6.js"></script>
Copied!
Place the div with id wt-auto-complete-v1 where you want the widget to be rendered / displayed
data-agentcode - is your agent code assigned by the wordtravels team
data-showlogo - if you want your logo and details to be shown in the info section of the page
data-highlightcolor - will set the highlight colours of the widget (spinner and highlighted characters)
data-font - will set the font of the Wordtravels content (only supported browser fonts)
Styling
The auto complete input can be easily styled by applying the below styles. This style sheet just needs to included on the webpage.
1
body {
2
font-family: Helvetica, sans-serif;
3
}
4
5
.react-autosuggest__container {
6
position: relative;
7
}
8
9
.react-autosuggest__input {
10
width: 50%;
11
height: 30px;
12
padding: 10px 20px;
13
font-family: Helvetica, sans-serif;
14
font-weight: 300;
15
font-size: 16px;
16
border: 1px solid #aaa;
17
border-radius: 4px;
18
}
19
20
.react-autosuggest__input--focused {
21
outline: none;
22
}
23
24
.react-autosuggest__input--open {
25
border-bottom-left-radius: 0;
26
border-bottom-right-radius: 0;
27
}
28
29
.react-autosuggest__suggestions-container {
30
display: none;
31
}
32
33
.react-autosuggest__suggestions-container--open {
34
display: block;
35
position: absolute;
36
top: 51px;
37
width: 280px;
38
border: 1px solid #aaa;
39
background-color: #fff;
40
font-family: Helvetica, sans-serif;
41
font-weight: 300;
42
font-size: 16px;
43
border-bottom-left-radius: 4px;
44
border-bottom-right-radius: 4px;
45
z-index: 2;
46
}
47
48
.react-autosuggest__suggestions-list {
49
margin: 0;
50
padding: 0;
51
list-style-type: none;
52
}
53
54
.react-autosuggest__suggestion {
55
cursor: pointer;
56
padding: 10px 20px;
57
}
58
59
.react-autosuggest__suggestion--highlighted {
60
background-color: #ddd;
61
}
62
63
.react-autosuggest__suggestion-match {
64
color:#0a3d87;
65
font-weight: bold;
66
}
67
68
iframe {
69
width: 80%;
70
height: 100vh;
71
margin-top: 20px;
72
margin-bottom: 30px;
73
-moz-border-radius: 12px;
74
-webkit-border-radius: 12px;
75
border-radius: 12px;
76
-moz-box-shadow: 4px 4px 14px #B4B4B4;
77
-webkit-box-shadow: 4px 4px 14px #B4B4B4;
78
box-shadow: 4px 4px 14px #B4B4B4;
79
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
80
}
81
82
83
/*
84
##Device = Desktops
85
##Screen = 1281px to higher resolution desktops
86
*/
87
88
@media (min-width: 1281px) {
89
90
91
}
92
93
/*
94
##Device = Laptops, Desktops
95
##Screen = B/w 1025px to 1280px
96
*/
97
98
@media (min-width: 1025px) and (max-width: 1280px) {
99
100
}
101
102
/*
103
##Device = Tablets, Ipads (portrait)
104
##Screen = B/w 768px to 1024px
105
*/
106
107
@media (min-width: 768px) and (max-width: 1024px) {
108
109
}
110
111
/*
112
##Device = Tablets, Ipads (landscape)
113
##Screen = B/w 768px to 1024px
114
*/
115
116
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
117
118
119
}
120
121
/*
122
##Device = Low Resolution Tablets, Mobiles (Landscape)
123
##Screen = B/w 481px to 767px
124
*/
125
126
@media (min-width: 481px) and (max-width: 767px) {
127
128
.react-autosuggest__input { width: 90% !important; }
129
iframe {
130
width: 100% !important;
131
}
132
133
}
134
135
/*
136
##Device = Most of the Smartphones Mobiles (Portrait)
137
##Screen = B/w 320px to 479px
138
*/
139
140
@media (min-width: 320px) and (max-width: 480px) {
141
142
.react-autosuggest__input { width: 90% !important; }
143
iframe {
144
width: 100% !important;
145
}
146
147
}
148
Copied!
Last modified 2yr ago
Copy link