Bootstrap输入字段中的样式jQuery自动完成 [英] Style jQuery autocomplete in a Bootstrap input field

问题描述

我已经对Bootstrap输入实现了jQuery自动完成功能。 jQuery自动完成功能运行良好，但我希望将结果作为一个组合查看，并且我猜现在正在发生，因为我正在使用BootStrap。

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.

'm分配自动完成功能：

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

显示的结果如下：

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

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

推荐答案

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

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

如果您不喜欢jQuery UI样式，则必须重新创建本来可以应用的所有样式。

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

这是一个示例和一些可能的解决方法。

Here's an example and some possible fixes.

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

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

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

只需包含jquery-ui.css，一切就可以在最新受支持的jquery版本中正常工作。

Just include jquery-ui.css and everything should work just fine with the latest supported versions of 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>

有一个项目为名为jQuery-UI的 jquery-ui-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.

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

如果您只需要jQuery-UI库中的AutoComplete小部件，则应先进行自定义构建，以免占用资源不使用。

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的 autocomplete.css 和 theme.css 找出需要手动替换的样式。

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

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

You can use bootstrap's dropdowns.less for inspiration.

下面是一个示例CSS，非常适合Bootstrap的默认主题：

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

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

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

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-autocomplete and remove display: none;.

这篇关于Bootstrap输入字段中的样式jQuery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！