引导自动完成结果位于右列

Bootstrap autocomplete result in right column

本文关键字：结果 于右列      更新时间：2023-09-26

编辑：我现在制作了一个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时，我完全是个傻瓜。。

请参阅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/.

相关文章：