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;
  }
  
}