在Bootstrap输入字段中样式jQuery自动完成

Question

我已经为Bootstrap输入实现了一个jQuery自动完成功能。 jQuery自动完成工作正常，但我希望将结果看作组合，我猜它现在正在发生，因为我正在使用BootStrap。

这是我指定自动填充的字段：

<div class="form-group">
  <label>Employee</label>
  <input class="form-control" name="txtEmployee" placeholder="Trabajador">
</div>

$(this).autocomplete({

  source: function(request, response) {
    $.ajax({
      url: '@Url.Content("~/Employee/SearchEmployee")/',
      type: 'POST',
      contentType: 'application/json',
      dataType: "json",
      data: JSON.stringify({
          employerId: 1,
          searchStr: me.val()
      }),
      success: function(data) {
        if (data.success) {

          response($.map(data.data, function(item) {

            return {
              label: "(" + item.EmployeeNumber + ") " + 
                           item.FirstName + " " + 
                           item.MothersLast + ", " + 
                           item.FathersLast,
              employeeId: item.EmployeeId
            }
          }));
        } 
      }
    });
  },
  minLength: 3
});

显示的结果如下：

如何使用Bootstrap设置结果样式，以便我可以看到它们如dropdownlist？

Answer 1

如果你正在使用jQuery-UI，你必须包含jQuery UI CSS包，否则UI组件不知道如何设置样式。

如果您不喜欢jQuery UI样式，那么您必须重新创建原本应用的所有样式。

以下是一个示例和一些可能的修复方法。

Minimal, Complete, and Verifiable example（即破碎）

这里是Stack Snippets中的一个演示没有 jquery-ui.css（没有工作）

＆＃13;

＆＃13;

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">

  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

修复＃1 - jQuery-UI样式

只需包含jquery-ui.css，所有内容都可以使用最新支持的jquery版本。

＆＃13;

＆＃13;

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修复＃2 - 引导主题

有一个项目为名为jquery‑ui‑bootstrap的jQuery-UI组件创建了一个Bootstrap-esque主题。只需从那里抓取样式表，你应该全部设置。

＆＃13;

＆＃13;

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group">
    <label >Another Field</label>
    <input class="form-control">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

修复＃3 - 手动CSS

如果您只需要来自jQuery-UI库的自动完成小部件，则应首先进行自定义构建，这样您就不会吸引您不使用的资源。

之后，您需要自己设计样式。只需查看应用于jquery＆＃39; autocomplete.css和theme.css的其他一些样式，以确定您需要手动替换的样式。

您可以使用bootstrap的dropdowns.less获取灵感。

这是一个与Bootstrap的默认主题非常吻合的示例CSS：

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
  padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
  background-color: #DDD;
}
.ui-helper-hidden-accessible {
  display: none;
}

＆＃13;

＆＃13;

$(function() {
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran",
    "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl",
    "PHP", "Python", "Ruby", "Scala", "Scheme"
  ];
  
  $(".autocomplete").autocomplete({
    source: availableTags
  });
});

＆＃13;

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
  padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
  background-color: #DDD;
}
.ui-helper-hidden-accessible {
  display: none;
}

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="container">
  <div class="form-group ui-widget">
    <label>Languages</label>
    <input class="form-control autocomplete" placeholder="Enter A" />
  </div>
  
  <div class="form-group ui-widget">
    <label >Another Field</label>
    <input class="form-control" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

提示：由于每次检查元素时都会隐藏下拉菜单（即输入失去焦点时），为了便于调试样式，请使用.ui-autocomplete找到控件并删除display: none;。

Answer 2

试试这个（demo）：

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script>

<script>
    function sync(items) {
        var value = items.reduce(function(s, item){
            return s + ' ' + item.name;
        }, '');
      
        $('#n2').val(value.slice(1));
    }
</script>

<body>
    <div id="wrapper">
        <h1>Dynamic Tag Input Suggestions</h1>
        <p>Start typing the name of a popular video game to get some helpful suggestions.</p>
        <div id="searchbar">
            1st input
            <input type="text" id="vidyagames" name="vidya">
            <br/>
            <br/> 2nd input
            <input id="n2" size="50">
        </div>
    </div>
    <!-- @end #wrapper -->
</body>​

Answer 3

我找到了以下css，以便为jquery自动完成设置Bootstrap输入的样式：

https://gist.github.com/daz/2168334#file-style-scss

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}
.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
}
.ui-state-hover, &.ui-state-active {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0px;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      background-image: none;
    }

Answer 4

（引导）输入字段和jquery-ui自动完成程序之间的间隙似乎仅在jQuery版本> = 3.2中出现

使用jQuery 3.1.1版时，似乎没有发生。

可能的原因是v3.2.0中的显着更新与.width()和.height()的错误修复有关。请查看jQuery发行说明以获取更多详细信息：v3.2.0 / v3.1.1

使用了Bootstrap版本3.4.1和jquery-ui版本1.12.0