移动jQueryUI自动完成的位置

时间:2016-01-31 17:37:07

标签: jquery css jquery-ui jquery-ui-autocomplete

如何稍微移动jQueryUI自动完成显示列表的位置?

我可以使用var ul=$("#field").autocomplete().autocomplete('widget');选择它。

然后,在offset()上使用ul不起作用,因为在打开小部件时ul处于定位状态。

请参阅http://jsfiddle.net/tu0usot8/

3 个答案:

答案 0 :(得分:1)

不确定它是否是最好的,但有一个选项是:

open: function(event, ui) {
      var ul = $(this).autocomplete('widget'),offset=ul.offset();
      ul.offset({top:offset.top+20}) //Move 20px down
    },

答案 1 :(得分:1)

您可以使用"位置选项"字段就像在下面的代码片段中我向右移动了100个自动完成。

var ul=$("#field").autocomplete({
    source: countries_starting_with_A,
    minLength: 1,
    position: { my : "left top+20", at: "left bottom" },
    select: function(event, ui) {
............................................

有关详细信息,您可能会看到position



$(function () {
  var countries_starting_with_A = [
    {
      "id": "1",
      "value": "Afghanistan",
      "label": "Afghanistan"
    },
    {
      "id": "17",
      "value": "Albania",
      "label": "Albania"
    },
    {
      "id": "18",
      "value": "Algeria",
      "label": "Algeria"
    },
    {
      "id": "20",
      "value": "American Samoa",
      "label": "American Samoa"
    },
    {
      "id": "22",
      "value": "Andorra",
      "label": "Andorra"
    },
    {
      "id": "10",
      "value": "Angola",
      "label": "Angola"
    },
    {
      "id": "11",
      "value": "Anguilla",
      "label": "Anguilla"
    },
    {
      "id": "23",
      "value": "Antarctica",
      "label": "Antarctica"
    },
    {
      "id": "24",
      "value": "Antigua and Barbuda",
      "label": "Antigua and Barbuda"
    },
    {
      "id": "25",
      "value": "Argentina",
      "label": "Argentina"
    },
    {
      "id": "26",
      "value": "Armenia",
      "label": "Armenia"
    },
    {
      "id": "27",
      "value": "Aruba",
      "label": "Aruba"
    },
    {
      "id": "28",
      "value": "Australia",
      "label": "Australia"
    },
    {
      "id": "29",
      "value": "Austria",
      "label": "Austria"
    },
    {
      "id": "12",
      "value": "Azerbaijan",
      "label": "Azerbaijan"
    }
  ];

  var ul=$("#field").autocomplete({
    source: countries_starting_with_A,
    minLength: 1,
    position: { my : "left top+20", at: "left bottom" },
    select: function(event, ui) {
      // feed hidden id field
      $("#field_id").val(ui.item.id);
      // update number of returned rows
      $('#results_count').html('');
    },
    open: function(event, ui) {
      // update number of returned rows
      var len = $('.ui-autocomplete > li').length;
      $('#results_count').html('(#' + len + ')');
    },
    close: function(event, ui) {
      // update number of returned rows
      $('#results_count').html('');
    },
    // mustMatch implementation
    change: function (event, ui) {
      if (ui.item === null) {
        $(this).val('');
        $('#field_id').val('');
      }
    }
  }).autocomplete('widget');
  console.log(ul)

  // mustMatch (no value) implementation
  $("#field").focusout(function() {
    if ($("#field").val() === '') {
      $('#field_id').val('');
    }
  });
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<label for="field_id">ID</label>
<input id="field_id" type="text" style="width: 40px;">
<label for="field">Countries (starting with A)</label>
<input id="field" type="text" style="width: 200px;">
&nbsp;&nbsp;&nbsp;
<span id="results_count"></span>
<br><br>
<input type="button" value="OK">
&#13;
&#13;
&#13;

答案 2 :(得分:-1)

jQueryUI插件更改了自动完成元素样式,因此它将位于文本字段旁边。 因为style属性只能使用!important关键字覆盖,并且不建议更改插件的代码以绕过它,所以可以使用以下CSS:

.ui-autocomplete {
  top: 100px !important;
}