javascript - 右列中的 Bootstrap 自动完成结果

Question

编辑:我现在制作了一个 bin 来显示我的输出: 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>

现在在我的文本字段公司我有一个自动完成功能:

<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> 中但我想在右侧的一列中显示搜索结果，这通常是不可见的。有人可以帮我吗？说到 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/ .