Font Awesome 带有 easyAutocomplete 插件

我有一个表单，我想在其中显示输入文本字段并在同一行上提交。输入文本字段有两个 FontAwesome 图标，我想在文本字段内显示它们。当我不使用简单的自动完成插件时，我可以根据需要设置表单样式。但是当我激活轻松自动完成 http://easyautocomplete.com/插件，样式变得混乱。

这是代码：

HTML:

<form role="search" method="get" id="searchform" class="searchform" action="">
  <span class="fa fa-map-marker my-fa"></span>
  <input type="text" value="" name="s" id="search-input" class="s" placeholder="Enter your Postcode" autocomplete="off">
  <img id="slider-loading" class="loading" src="https://www.imageupload.co.uk/images/2017/02/05/gps2.gif" />
  <input type="hidden" value="profile" name="post_type" id="post_type" />
  <input type="hidden" value="country" name="taxonomy" />
  <input type="submit" id="searchsubmit" value="GO" class="submit btn" />
</form>

jQuery

var options = {

  data: ["Cyclops", "Storm", "Mystique", "Wolverine", "Professor X", "Magneto"],

  theme: "dark"
};

$("#search-input").easyAutocomplete(options);

CSS:

.searchform {
  position: relative;
  text-align: center;
}

.searchform input[type="text"] {
  width: 400px;
  font-size: 15px;
  margin: 0px -3px 0px 0px;
  text-indent: 18px;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;
  font-family: 'Raleway', sans-serif;
  border: solid 1px #bbb;
  overflow: hidden;
  border-radius: 4px;
}

.searchform input[type=text],
.searchform input[type=text]:focus {
  outline: none;
}

.searchform input[type=text]:focus {
  border: none;
}

.searchform input[type="submit"] {
  background-color: #f70808;
  -webkit-box-shadow: 0 2px 0 #c60606;
  -moz-box-shadow: 0 2px 0 #c60606;
  box-shadow: 0 2px 0 #c60606;
  color: white;
  border: none;
  letter-spacing: 1px;
  padding: 15px;
  font-size: 15px;
  text-align: center;
}

.searchform input[type="submit"],
.searchform input[type="text"] {
  line-height: normal !important;
  display: inline-block;
}

.my-fa {
  font-family: 'FontAwesome';
  position: absolute;
  z-index: 2;
  color: #f70808;
  font-size: 2.8em;
  margin-left: 4px;
  top: 4px;
}

#slider-loading {
  position: relative;
  top: 12px;
  right: 35px;
}

我想在输入文本字段的左侧显示地图图标，并在输入文本字段的右侧显示加载微调器。

JSFiddle http://jsfiddle.net/vdht1cgw/- 使用 easyAutocomplete 插件

JsFiddle http://jsfiddle.net/b9d8ctcd/- 没有插件

您可以将以下代码添加到 CSS 中：

.easy-autocomplete{
    display:inline;
}

我认为它给了你想要的结果。

该插件将输入包装在div默认情况下有display:block并且它使其他元素脱离了界限。

您可能需要根据您的喜好调整填充/边距。

查看更新的小提琴 http://jsfiddle.net/vdht1cgw/1/