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

Question

提问by VAAA

I have implemented a jQuery autocomplete function to a Bootstrap input. The jQuery autocomplete is working fine but I want to see the results as a combo and I guess it's now happening because I'm using BootStrap.

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

This is the field that I'm assigning autocomplete:

这是我分配自动完成的字段：

<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
});

The results are displayed but like this:

结果显示出来，但像这样：

enter image description here

在此处输入图片说明

How can I style the results with Bootstrap so I can see them like dropdownlist?

如何使用 Bootstrap 设置结果样式，以便我可以像下拉列表一样查看它们？

Answer 1

回答by KyleMit

If you're using jQuery-UI, you mustinclude the jQuery UI CSS package, otherwise the UI components don't know how to be styled.

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

If you don't like the jQuery UI styles, then you'll have to recreate all the styles it would have otherwise applied.

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

Here's an example and some possible fixes.

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

Minimal, Complete, and Verifiable example(i.e. broken)

最小、完整和可验证的示例（即损坏的）

Here's a demo in Stack Snippets withoutjquery-ui.css (doesn't work)

这是没有jquery-ui.css 的Stack Snippets 中的演示（不起作用）

$(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
  });
});

<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>

Fix #1 - jQuery-UI Style

修复 #1 - jQuery-UI 样式

Just include jquery-ui.css and everything should work just fine with the latest supported versions of jquery.

只需包含 jquery-ui.css，一切都应该可以与最新支持的 jquery 版本一起正常工作。

$(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
  });
});

<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>

Fix #2 - Bootstrap Theme

修复 #2 - Bootstrap 主题

There is a project that created a Bootstrap-esque theme for jQuery-UI components called jquery?ui?bootstrap. Just grab the stylesheet from there and you should be all set.

有一个项目为名为jquery?ui?bootstrap 的jQuery-UI 组件创建了一个 Bootstrap 风格的主题。只需从那里获取样式表，您就应该准备就绪。

$(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
  });
});

<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>

Fix #3 - Manual CSS

修复 #3 - 手动 CSS

If you only need the AutoComplete widget from jQuery-UI's library, you should start by doing a custom build so you don't pull in resources you're not using.

如果您只需要 jQuery-UI 库中的 AutoComplete 小部件，您应该首先进行自定义构建，这样就不会拉入您不使用的资源。

After that, you'll need to style it yourself. Just look at some of the other styles that are applied to jquery's autocomplete.cssand theme.cssto figure out what styles you'll need to manually replace.

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

You can use bootstrap's dropdowns.lessfor inspiration.

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

Here's a sample CSS that fits pretty well with Bootstrap's default theme:

这是一个非常适合 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;
}

$(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
  });
});

.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;
}

<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>

Tip: Since the dropdown menu hides every time you go to inspect the element (i.e. whenever the input loses focus), for easier debugging of the style, find the control with .ui-autocompleteand remove display: none;.

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

Answer 2

回答by Nick

Try this (demo):

试试这个（演示）：

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Answer 3

回答by VAAA

I found the following css in order to style a Bootstrap input for a jquery autocomplete:

我找到了以下 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

回答by Ole K

The gap between the (bootstrap) input field and jquery-ui autocompleter seem to occur only in jQuery versions >= 3.2

(bootstrap) 输入字段和 jquery-ui 自动完成程序之间的差距似乎只发生在 jQuery 版本 >= 3.2

When using jQuery version 3.1.1 it seem to not happen.

当使用 jQuery 3.1.1 版本时，它似乎不会发生。

Possible reason is the notable update in v3.2.0 related to a bug fix on .width()and .height(). Check out the jQuery release notes for further details: v3.2.0/ v3.1.1

可能的原因是相关的bug修复上V3.2.0的可观的更新.width()和.height()。查看 jQuery 发行说明以获取更多详细信息：v3.2.0/ v3.1.1

Bootstrap version 3.4.1 and jquery-ui version 1.12.0 used

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

Answer 5

回答by Samuel Mercado

I don't know if you fixed it, but I did had the same issue, finally it was a dumb thing, I had:

我不知道你是否修复了它，但我确实遇到了同样的问题，最后这是一件愚蠢的事情，我有：

<script src="jquery-ui/jquery-ui.min.css" rel="stylesheet">

but it should be:

但它应该是：

<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">

Just change <scrip>to <link>and srcto href

只要改变<scrip>对<link>和src对href

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

提问by VAAA

回答by KyleMit

Minimal, Complete, and Verifiable example(i.e. broken)

最小、完整和可验证的示例（即损坏的）

Fix #1 - jQuery-UI Style

修复 #1 - jQuery-UI 样式

Fix #2 - Bootstrap Theme

修复 #2 - Bootstrap 主题

Fix #3 - Manual CSS

修复 #3 - 手动 CSS

回答by Nick

回答by VAAA

回答by Ole K

回答by Samuel Mercado

相关推荐

最近更新

标签

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

提问by VAAA

回答by KyleMit

Minimal, Complete, and Verifiable example(i.e. broken)

最小、完整和可验证的示例（即损坏的）

Fix #1 - jQuery-UI Style

修复 #1 - jQuery-UI 样式

Fix #2 - Bootstrap Theme

修复 #2 - Bootstrap 主题

Fix #3 - Manual CSS

修复 #3 - 手动 CSS

回答by Nick

回答by VAAA

回答by Ole K

回答by Samuel Mercado

相关推荐

jQuery 在元素中查找一串文本并在其周围包裹一些 span 标签

jQuery $("img[src=the_image_souce]").attr('src','new_src'); 不起作用

在事件上使用 jQuery 获取被点击的元素？

jQuery 在 AJAX 中解析 xml 响应的最佳方法是什么

相关推荐

最近更新

标签