A simple jquery ui autocomplete

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<h1>
 My expected result
</h1>

<div>
  <label for="tags">Search: </label>
  <input class="tags">
  <span class="icon"></span>
</div>



<hr>

<h1>
  <i>Same</i> result <i>without any span</i> for icon
</h1>

<p>
  But with <code>tags-wrap</code> in the <code>class</code> of the <code>input</code>'s <i>immediate</i> parent/container. See the JavaScript and CSS tabs; <b>I didn't not change the HTML markup</b> (other than adding these notes) &mdash; the <code>tags-wrap</code> class was added via JS/jQuery.
</p>

<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags">
</div>

<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" style="width:130px;">
</div>

<div class="ui-widget">

<label for="tags">Search: </label>
<input class="tags" style="width:140px;">

<label for="tags">Search: </label>
<input class="tags" style="width:100px;">

</div>


<div class="floated-elements ui-widget">
   <div class="float-right">
       <label for="tags">Search: </label>
       <input class="tags" style="width:300px;">
   </div>
   
    <div class="float-left">
        <label for="tags">Search: </label>
       <input class="tags" style="width:50px;">
   </div>
</div>

CSS

.ui-widget{
  margin-top: 20px;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.icon:before,
.tags-wrap:after{
    position: relative;
    content: "V";
    color: red;
    right: 17px;
}

/* Adjusted for this Fiddle.. */
.tags-wrap:after {
  right: 20px;
}

/* There should be no .icon in a .tags-wrap; but just in case.. */
.tags-wrap .icon:before {
  display: none;
}

JavaScript

$(function() {
var availableTags = [
"john",
"khair",
"compton",
"Jordan",
"Micheal",
"Peter"
];
$( ".tags" ).autocomplete({
source: availableTags
});
});

// Automatically add the 'tags-wrap' class to the immediate parent of the autocomplete input fields.
$('.tags').parent(':not(:has(.icon))')
	.addClass('tags-wrap');