问jQuery UI自动完成不能很好地用于引导下拉列表
EN

Stack Overflow用户

提问于 2017-11-30 12:05:29

回答 1查看 1.8K关注 0票数 1

代码：

<body>
  <div class="container">  

      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">dumped_li</a></li>
          <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
          </div>
        </ul>
       </div>

    </div>
</body>

    <script>
      $( function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      } );
      </script>

我做了一些代码，有jQuery UI自动完成在引导下拉。

当我运行它时，搜索栏(在本例中，输入-#标记)被很好地放置在下拉菜单中，但是autocomplish()结果显示在下拉菜单本身之外。

问题：如何将autocomplish()结果很好地放置到下拉菜单中，比如input (#tags)？

编辑：

我阅读了这篇堆栈溢出文章：https://stackoverflow.com/a/7944662/6736285和我发现了使用引导带和不使用引导带之间的区别。

听着，如果我使用引导: jsfiddle：http://jsfiddle.net/uMqyn/912/

代码：

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

</head>

<body>
  <div class="dropdown bigdiv">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
    <ul class="dropdown-menu bigul">
      <li><a href="#">dumped_li</a></li>
      <li class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
      </li>
    </ul>
  </div>
  <br/>
  <br/>
  <br/>

  <br/>
  <br/>
  <div class="anotherdiv" style="background-color: #447e9b; height: 200px;">
    GoesHere:
    <br/>
    <ul></ul>
  </div>
</body>
<script>
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
];
$('#tags').autocomplete({
    search: function(event, ui) {
        $('.anotherdiv ul').empty();
    },
    source: availableTags
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li></li>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.anotherdiv ul'));
};
</script>