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:
<link href="https://cdn.jsdelivr.net/gh/cherryblossom111cc/wordtravels/destination-auto-complete/static/css/main.v1.0.4.css" rel="stylesheet"/>
<div id="wt-auto-complete-v1" data-agentcode="abc" data-mode="iframe" data-showlogo="true" data-highlightColor="#663399"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/cherryblossom111cc/wordtravels/destination-auto-complete/static/js/main.v1.0.6.js"></script>
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.
body {
  font-family: Helvetica, sans-serif;
}
​
.react-autosuggest__container {
  position: relative;
}
​
.react-autosuggest__input {
  width: 50%;
  height: 30px;
  padding: 10px 20px;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}
​
.react-autosuggest__input--focused {
  outline: none;
}
​
.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
​
.react-autosuggest__suggestions-container {
  display: none;
}
​
.react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 51px;
  width: 280px;
  border: 1px solid #aaa;
  background-color: #fff;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2;
}
​
.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
​
.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}
​
.react-autosuggest__suggestion--highlighted {
  background-color: #ddd;
}
​
.react-autosuggest__suggestion-match {
  color:#0a3d87;
  font-weight: bold;
}
​
iframe {
  width: 80%;
  height: 100vh;
  margin-top: 20px;
  margin-bottom: 30px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 4px 4px 14px #B4B4B4;
  -webkit-box-shadow: 4px 4px 14px #B4B4B4;
  box-shadow: 4px 4px 14px #B4B4B4;
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}
​
​
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
​
@media (min-width: 1281px) {
​
  
}
​
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
​
@media (min-width: 1025px) and (max-width: 1280px) {
  
}
​
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
​
@media (min-width: 768px) and (max-width: 1024px) {
  
}
​
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
​
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
​
  
}
​
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
​
@media (min-width: 481px) and (max-width: 767px) {
  
  .react-autosuggest__input { width: 90% !important; }
  iframe {
    width: 100% !important;
  }
  
}
​
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
​
@media (min-width: 320px) and (max-width: 480px) {
  
  .react-autosuggest__input { width: 90% !important; }
  iframe {
    width: 100% !important;
  }
  
}
​
Widgets
Last updated 2 years ago