> For the complete documentation index, see [llms.txt](https://globe-media.gitbook.io/wt-widgets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://globe-media.gitbook.io/wt-widgets/auto-complete-destination-widget.md).

# Auto complete destination widget

## How to do it

Embed the following code into your webpage:

```markup
<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>
```

{% hint style="info" %}
Place the div with id wt-auto-complete-v1 where you want the widget to be rendered / displayed
{% endhint %}

{% hint style="info" %}
&#x20;data-agentcode - is your agent code assigned by the wordtravels team
{% endhint %}

{% hint style="info" %}
data-showlogo - if you want your logo and details to be shown in the info section of the  page
{% endhint %}

{% hint style="info" %}
data-highlightcolor - will set the highlight colours of the widget (spinner and highlighted characters)
{% endhint %}

{% hint style="info" %}
data-font - will set the font of the Wordtravels content (only supported browser fonts)
{% endhint %}

Styling

The auto complete input can be easily styled by applying the below styles. This style sheet just needs to included on the webpage.

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

```