Auto complete destination widget

Search…
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!
Widgets
Last modified 2yr ago
Copy link