Bootstrap автозаполнения результат в правом столбце

Question

Edit: Я сделал ящик, чтобы показать мой выход прямо сейчас: http://jsbin.com/cunuxaqe/6/edit

Для некоторых людей это может быть очень легко, но я не могу найти решение. У меня есть страница с несколькими текстовыми полями:

<div class="row"> 
    <div class="col-xs-6" > 
     <div class="input-group input-group-lg" style="width:100%;"> 
      <span class="input-group-addon"> 
       <span class="fa fa-fw fa-user"></span> 
      </span> 
      <input type="text" class="form-control" id="project" placeholder="Company"> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="input-group input-group-lg"> 
      <span class="input-group-addon"> 
       <span class="fa fa-fw fa-user"></span> 
      </span> 
      <input type="text" class="form-control" placeholder="Product"> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-6" > 
    <br> 
     <div class="col-xs-3" style="width:50%; margin-left:-15px;"> 
      <div class="input-group input-group-lg"> 
       <span class="input-group-addon"> 
        <span>KG</span> 
       </span> 
       <input type="text" class="form-control"> 
      </div> 
     </div> 
     <div class="col-xs-3" style="width:52%; "> 
      <div class="input-group input-group-lg" > 
       <span class="input-group-addon"> 
        <span>€</span> 
       </span> 
       <input type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
    <br> 
     <div class="input-group input-group-lg"> 
      <span class="input-group-addon"> 
       <span class="fa fa-fw fa-pencil"></span> 
      </span> 
      <input type="text" class="form-control"> 
     </div> 
    </div> 
</div> 

Теперь в моем текстовом поле Company У меня есть функция автозаполнения:

<script> 
    (function($){ 

    var $project = $('#project'); 

    var projects = [ 
    { 
     value: "test", 
     label: "Test" 
    }, 
    { 
     value: "hoi", 
     label: "Hoi" 
    } 
    ]; 

    $project.autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function(event, ui) { 
     $project.val(ui.item.label); 
     return false; 
    } 
    }); 

    $project.data("ui-autocomplete")._renderItem = function(ul, item) { 

    var $li = $('<li class="form-control">'), 
     $img = $('<img>'); 




    $li.attr('data-value', item.label); 
    $li.append('<a href="#">'); 
    $li.find('a').append(item.label); 

    return $li.appendTo(ul); 
    }; 


})(jQuery); 
    </script> 

Результаты показаны в <li>, но я хотел бы показать результат поиска в столбце справа, который не будет отображаться нормально. Может кто-нибудь помочь мне? Я полный noob, когда речь заходит о JQuery и Javascript ..

Answer 1

См. appendTo. Он устанавливает, к какому элементу должно быть добавлено меню.

<div class="row"> 
    <div class="col-xs-6"> 
    <form role="form"> 
     <input type="text" placeholder="Tags" class="form-control" id="tags"> 
    </form> 
    </div> 
    <div class="col-xs-6" id="results"></div> 
</div> 

Инициализировать автозаполнения с appendTo вариант указанного:

$('#tags').autocomplete({ 
    appendTo: '#results', 
    minLength: 0, 
    source: ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby'] 
}); 

Смотрите живой пример здесь: http://jsfiddle.net/cdog/7ajmxbkh/.