Font Awesome with easyAutocompleteプラグイン

Question

私は、入力テキストフィールドを表示して同じ行に送信したいフォームがあります。入力テキストフィールドには、テキストフィールド内に表示する2つのFontAwesomeアイコンがあります。私は簡単なオートコンプリートプラグインを使用しないときに、私が望むようにフォームをスタイルすることができます。しかし、easyAutocompleteプラグインを有効にすると、スタイリングがうまく行きます。

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 - easyAutocompleteプラグイン

JsFiddleと - プラグイン

Answer 1

せずにあなたのCSSに以下のコードを追加することができます。

.easy-autocomplete{ 
    display:inline; 
} 

を、私はそれはあなたの希望を与えると思います結果。

プラグインはdivに入力をラップし、デフォルトでdisplay:blockになり、他の要素がライン外にスローされます。

必要に応じて、パディング/マージンを調整する必要があります。

See updated fiddle