字体真棒与easyAutocomplete插件 [英] Font Awesome with easyAutocomplete plugin

问题描述

我有一个表单，我想在其中显示输入文本字段并在同一行上提交。输入文本字段有两个FontAwesome图标，我想在文本字段中显示。当我不使用简单的自动完成插件时，我可以根据需要设计窗体样式。但是，当我激活 easyAutocomplete 插件时，造型会变得不合时宜。

以下是代码：
$ b HTML：

 < form role =searchmethod =getid =searchformclass =searchformaction => 
 < input type =textvalue =name =sid =search-inputclass =splaceholder =输入您的邮政编码autocomplete =off> 
< img id =slider-loadingclass =loadingsrc =https://www.imageupload.co.uk/images/2017/02/05/gps2.gif/> 
< input type =hiddenvalue =profilename =post_typeid =post_type/> 
< input type =hiddenvalue =countryname =taxonomy/> 
< input type =submitid =searchsubmitvalue =GOclass =submit btn/> 
< / form> 
  

jQuery
< pre $


数据：[Cyclops]，[Storm]，[Mystique]，[金刚狼]，[X教授]，[Magneto] ]，

主题：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：大写; 
 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; 
颜色：白色; 
 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'; 
位置：绝对; 
 z-index：2; 
颜色：＃f70808; 
 font-size：2.8em; 
 margin-left：4px; 
 top：4px; 
} 
 
＃滑块加载{
位置：相对; 
 top：12px; 
 right：35px; 
} 
  

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

JSFiddle - 带有easyAutocomplete插件

JsFiddle - 不带插件

以下代码到您的CSS：

  .easy-autocomplete {
 display：inline; 
} 
  

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

插件将输入包装在一个 div 中，默认情况下该输入包含 display：block 和它会抛出其他元素。

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

查看更新的小提琴

I have a form in which I want to show the input text field and submit on the same line. The input text field has two FontAwesome icons which I want to show inside the text field. I can style the form as I want when I don't use the easy Autocomplete plugin. But when I activate the easyAutocomplete plugin, the styling goes haywire.

Here's the code:

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

I want to show the map icon on the left of the input text field and and the loading spinner on the right of the input text field.

JSFiddle - with easyAutocomplete plugin

JsFiddle - without the plugin

解决方案

You could add the following code to your CSS:

.easy-autocomplete{
    display:inline;
}

I think it gives you the desired outcome.

The plugin wraps the input in a div which by default have display:block and it throws the other elements out of line.

You may need to adjust the padding/margin to your preference.

See updated fiddle

这篇关于字体真棒与easyAutocomplete插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！